信息泡沫总是显示了在最后一个标记

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

看一看我的jSFiddle here。你缺少的代码是

1. 点击你需要从地图读取当前的信息窗口，然后如果你要经常打开窗户用新信息
2. 更新和关闭，当人们想关闭，那么你必须设置一个切换类型的变量，这样每个窗口将在点击时创建，然后当有人点击关闭时它将消失。但我认为你只需要完成第一部分。

你应该看看我的小提琴的代码是从线120至150，并检查信息窗口，如果它存在，然后就打开新的标记相同的窗口，以便从旧移动游标并转到新的。如果你不断创建新的窗口，那么旧的窗口不会神奇地关闭。

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

Answer 2

您正在使用变量似乎两个不同的目的。一个是单个标记，另一个是标记数组。但是如果你使用闭包，你不需要一组标记。试试这个：

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