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。您缺少的代码是

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

你应该在我的小提琴中查看的代码是从第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);
    }

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

2 个答案: