javascript - 谷歌地图无法设置多个标记

Question

我构建了一个 for 循环来测试一组位置，当 true 时将纬度/经度值发送到函数以创建标记。我的问题是标记移动，但没有创建额外的标记。我不清楚为什么会发生这种情况，因为我认为由于每次调用 addMarker 函数时都会创建一个新的实例变量，因此我会在 map 上获得另一个标记。任何帮助表示赞赏。谢谢。

function addMarker(x, y) {
    var myLatLng = {
        lat: parseFloat(x),
        lng: parseFloat(y)
    };
    console.log(myLatLng);
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 6,
        center: myLatLng
    });
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'hello world'
    });
    markers.push(marker);
    marker.setMap(map);
}

Answer 1

这是因为您在该行的每个循环中创建一个新 map :

var map = new google.maps.Map(document.getElementById("map"),{
  zoom: 6,
  center: myLatLng
});

您需要声明一次，而不是每次循环:

var neighborhoods = [
  {lat: 52.511, lng: 13.447},
  {lat: 52.549, lng: 13.422},
  {lat: 52.497, lng: 13.396},
  {lat: 52.517, lng: 13.394}
];

var markers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 52.520, lng: 13.410}
  });
}

function addMarkers() {
  for (var i = 0; i < neighborhoods.length; i++) {
    markers.push(new google.maps.Marker({
      position: neighborhoods[i]
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }
}