1

可能重复：
谷歌地图 - 多个标记 - 1 InfoWindow 问题

我正在制作一张地图，在其中绘制一些城镇和地点。正如您将看到的，当您单击标记时，您将被重定向到相应的页面。但现在我想将链接和其他一些信息放在信息气泡弹出框中。所以，我已经将我的代码编辑为：

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);
    });
  }
}

但正如您在此处看到的，信息气泡在最后一个位置保持“阻塞”状态。我真的不知道如何排序。

我有同样的结果：

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);
  });
}
4

2 回答 2

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]);
  }
}
于 2013-02-02T11:42:34.473 回答
0

看看我的jSFiddle 这里。您缺少的代码是

  1. 单击时，您需要从地图中获取当前的 infoWindow，然后使用新信息对其进行更新
  2. If you want to keep windows open and close when people want to close then you have to set a toggle kind of variable so each window will be created on click and then when someone click on close it will go away. But i think you only need to complete first part.

The code you should look in my fiddle is from line 120 to 150 which does check for infowindow if it exists and then do open the same window on new marker so it moves from old marker and go to new. if you keep creating new windows the old ones will not close magically.

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);
    }
于 2013-02-02T15:34:27.127 回答