javascript - 信息气泡始终显示在最后一个标记上

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
Google Maps - Multiple markers - 1 InfoWindow problem

我正在做一个map我在那里绘制了一些城镇和地点。正如您将看到的，当您单击标记时，您将被重定向到相应的页面。但现在我想将链接和其他一些信息放在信息气泡弹出窗口中。因此，我将代码编辑为:

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
    marker[i] = marker;
    google.maps.event.addListener(marker[i], 'click', function() { 
      infobulle.open(map, marker);
    });
  }
}

但是你可以see here信息气泡在最后一个位置保持“阻塞”状态。我真的不知道如何排序。

我得到了同样的结果:

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
  var beach = locations[i];
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4]});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});

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

最后版本:

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    processBeach(locations[i]);
  }
}
function processBeach(beach) {
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4]});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
  google.maps.event.addListener(marker, 'click', function() { 
infobulle.open(map, marker);
  });
}

Answer 1

您似乎将 marker 变量用于两个不同的目的。一种是作为单个标记，一种是作为标记数组。但如果您使用闭包，则不需要一系列标记。试试这个:

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    (function(beach) {
      var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
      var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
      var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
      google.maps.event.addListener(marker, 'click', function() { 
        infobulle.open(map, marker);
      });
    }(locations[i]));
  }
}

顺便说一下，google.maps.Marker 的选项数组末尾还有一个虚假逗号，这会在某些浏览器中导致问题。

编辑

如果你不想使用闭包，这是等效的:

function processBeach(beach) {
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
  google.maps.event.addListener(marker, 'click', function() { 
    infobulle.open(map, marker);
  });
}

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    processBeach(locations[i]);
  }
}