Question

我正在尝试在Google地图中显示信息窗口，但它显示的不是最后一个标记信息

    let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 );
    let mapOptions = {
      zoom: 13,
      center: myLatlng,
      scrollwheel: true,  

      }; 
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
    ];

    let map = new window.google.maps.Map(
      document.getElementById("map"),
      mapOptions
    );


    var count;
    var marker=[];
    for (count = 0; count < locations.length; count++) {  
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
    }


    var infowindow = new google.maps.InfoWindow({
      content:"<div></div>"
      });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
      });

    marker.setMap(map);

Answer 1

我认为您必须像这样更改代码：

 var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
 ];
var count;
var marker=[];
for (count = 0; count < locations.length; count++) {  


let myLatlng = new window.google.maps.LatLng(locations[count][1], locations[count][2]);

let mapOptions = {
  zoom: 13,
  center: myLatlng,
  scrollwheel: true,  
};

let map = new window.google.maps.Map(
  document.getElementById("map"),
  mapOptions
  );
  marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: locations[count][0]
  });
   }

var infowindow = new google.maps.InfoWindow({
  content:"<div></div>"
  });

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
  });

marker.setMap(map);

Answer 2

在这里，我发现您在做什么问题

您将在循环中的每次迭代中初始化map，但不应这样做。这就是为什么只显示一个标记（最后一个）的原因。
您尝试在循环后仅绑定一个标记（最后一个标记），但是应该将其绑定到循环中的单个标记。

我对工作有以下建议：

在地图上绘制标记之前初始化地图一次
绑定标记在每个标记内单击循环。
通过latLng的对象设置信息窗口的位置

这是工作示例：

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Init map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Create info window
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
});

var infoFn = function (count) {
    return function (e) {
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    }
};

// Add markers
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    });
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);
}

如何在谷歌地图中修复信息窗口

2 个答案: