如何在谷歌地图上添加两个位置的标记？答案

【问题标题】：How to add marker on google map with two locations?如何在谷歌地图上添加两个位置的标记？
【发布时间】：2018-11-13 11:06:03
【问题描述】：

我想在谷歌地图上添加两个可点击位置的标记。当我单击按钮时，它应该使用位置更改地图标记。

 <script>
    var map;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
            zoom: 14,

        });
        var marker = new google.maps.Marker({
            position: newLocation(),
            map: map,
            title: 'AGM-CORP',
            icon: 'img/agm-marker.png'
        });
    }

    function newLocation(newLat, newLng)
    {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    $(document).ready(function ()
    {
        $("#1").on('click', function ()
        {
            newLocation(52.302516, 16.414546);
        });

        $("#2").on('click', function ()
        {
            newLocation(51.706478, 15.274753);
        });
    });
</script>
<div id="map-canvas"></div>
</div>
    <h3>Zobacz lokalizację:</h3>
    <button id="1" style="padding:10px; cursor:pointer;">Siedziba Firmy</button>
    <button id="2" style="padding:10px;cursor:pointer;">Kopalnia Kruszyw</button>
</div>

【问题讨论】：

Google Maps JS API v3 - Simple Multiple Marker Example的可能重复
是的，您就是这样做的。您创建一个位置数组及其 lat/lng 和信息窗口信息。这是一个将地址转换为 lat 和 lng latlong.net 的好网站

标签： javascript jquery google-maps location google-maps-markers

【解决方案1】：

这个函数只会切换视图的位置：

map.setCenter({
   lat: newLat,
   lng: newLng
});

改用这个：

new google.maps.LatLng(-25.363882,131.044922);

其次，您需要将事件侦听器添加到标记对象以使其正常工作：

// create markers on the map
marker1 = new google.maps.Marker({ ... })
marker2 = new google.maps.Marker({ ... })
marker3 = new google.maps.Marker({ ... })

// add event listener
marker1.addListener('click', function() { ... })
marker2.addListener('click', function() { ... })

进一步查看docs，它们非常简单。

【讨论】：

【解决方案2】：

var map = null
var marker = null;
var myLatLng = {
  lat: 52.302516,
  lng: 16.414546
};

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
    zoom: 14,
  });

  marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

function updateMap(lat, lng) {;
  myLatLng.lat = lat;
  myLatLng.lng = lng
  map.setCenter(myLatLng);
  marker.setPosition(myLatLng);
}


$(document).ready(function() {
  $("#1").on('click', function() {
    updateMap(52.302516, 16.414546);
  });

  $("#2").on('click', function() {
    updateMap(51.706478, 15.274753);
  });
});

我正在使用新标记初始化地图。 Working jffiddle is here

【讨论】：

我已经复制了你的代码，但很奇怪，因为我的页面上没有显示地图...
地图仅在我单击按钮时显示。不是在我刷新页面加载时
google.maps.event.addDomListener(window, 'load', initMap);
为什么每次点击按钮都要重新初始化地图？效率低下
那你有什么推荐的？

【解决方案3】：

这会奏效。有一个包含marker 的全局变量。每当更改位置时，使用setPosition 方法将标记设置在Lat 和Lng 的位置，并使用setCenter 方法将标记显示在中心。无需每次都初始化地图。

var map,marker;
function initialize()
{
    map = new google.maps.Map(document.getElementById('googleMap'), {
        center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
        zoom: 6,
    });
    setLocation(52.302516,16.414546);
}

function setLocation(newLat, newLng)
{
    var latlng = new google.maps.LatLng(newLat,newLng);
    if(marker) //Remove the marker, if already set
    {
        marker.setMap(null);
    }
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'AGM-CORP'
    });
    map.setCenter(latlng);

}

$(document).ready(function ()
{
    $("#1").on('click', function ()
    {
        setLocation(13.070814558816117, 80.2656996835234);
    });

    $("#2").on('click', function ()
    {
        setLocation(59.4739316352335,-110.89646088128342);
    });
});

【讨论】：