信息泡沫总是显示了在最后一个标记
问题描述:
可能重复:
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);
});
}
答
看一看我的jSFiddle here。你缺少的代码是
- 点击你需要从地图读取当前的信息窗口,然后如果你要经常打开窗户用新信息
- 更新和关闭,当人们想关闭,那么你必须设置一个切换类型的变量,这样每个窗口将在点击时创建,然后当有人点击关闭时它将消失。但我认为你只需要完成第一部分。
你应该看看我的小提琴的代码是从线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);
}
答
您正在使用变量似乎两个不同的目的。一个是单个标记,另一个是标记数组。但是如果你使用闭包,你不需要一组标记。试试这个:
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]);
}
}
哼,我真的不明白你在沙滩上做了什么。 –
是的,封闭需要一点时间来解决你的问题。我正在做的是一次性定义和调用一个函数。所以我定义了一个匿名函数,它接受一个名为'beach'的参数,然后调用它,传递'locations [i]'的值作为参数。因此,在闭包中,'beach'具有从'locations [i]'传入的值,用于当前迭代的'i'值。正如代码中所发生的那样,泄漏值没有问题,因为'beach'只存在于闭包内部,对于'for'循环的每次迭代来说,重要的是一个_different变量_。 – leftclickben
我刚更新了答案,以包含没有关闭的版本。 – leftclickben