信息气泡始终显示在最后一个标记上[重复]

Question

可能重复：
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]);
  }
}

Answer 2

看看我的jSFiddle here。您缺少的代码是

1. 点击时，您需要从地图中获取当前的 infoWindow，然后使用新信息对其进行更新
2. 如果您想让窗口在人们想要关闭时保持打开和关闭，那么您必须设置一种切换类型的变量，以便在单击时创建每个窗口，然后当有人单击关闭时它会消失。但我认为你只需要完成第一部分。

您应该在我的小提琴中查看的代码是从第 120 行到第 150 行，它会检查 infowindow 是否存在，然后在新标记上打开相同的窗口，以便它从旧标记移动到新标记。如果您继续创建新窗口，旧窗口将不会神奇地关闭。

var map = $(this).gmap3("get"),
      infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
    if (infowindow){ // if infoWindow is there then use it else create new
      infowindow.open(map, marker);
      infowindow.setContent(context.data.ht);
      jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    } else {
      $(this).gmap3({
        infowindow:{
          anchor:marker, 
          options:{content: context.data.ht}

        }
      });
        jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    }