Javascript 标记单击事件始终打开到最后一个窗口
我有一个json对象Javascript 标记单击事件始终打开到最后一个窗口,javascript,google-maps,google-maps-api-3,infowindow,marker,Javascript,Google Maps,Google Maps Api 3,Infowindow,Marker,我有一个json对象infoCentros,用于构建地图,如下所示: for ( var i = 0; i < infoCentros.length; i++ ) { var centro = infoCentros[i]; var lat = centro.cordenadas.lat; var lon = centro.cordenadas.long; if (lat && lon) { c++; latl
infoCentros
,用于构建地图,如下所示:
for ( var i = 0; i < infoCentros.length; i++ ) {
var centro = infoCentros[i];
var lat = centro.cordenadas.lat;
var lon = centro.cordenadas.long;
if (lat && lon) {
c++;
latlon = new google.maps.LatLng(lat, lon);
var moptions = {
position: latlon,
map: $project.gmap
}
moptions.icon = theme_uri + '/images/marker.png';
var marker = new google.maps.Marker(moptions);
$project.mapMarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
$project.mapInfoWindow.setContent(
'<div class="sescam-info-window">' +
'<h3>' + centro.nombre + '</h3>' +
'<p>' + centro.lugar + '</h3>' +
'<p>Coordinador</p>' +
'<p>' + centro.coordinador.nombre + '</p>' +
'<p>' + centro.coordinador.email + '</p>' +
'<p>Responsable</p>' +
'<p>' + centro.responsable.nombre + '</p>' +
'<p>' + centro.responsable.email + '</p>'
+ '</div>'
);
$project.mapInfoWindow.open($project.gmap, marker);
});
$project.mapBounds.extend(latlon);
}
}
for(var i=0;i”+
“”+centro.coordinador.email+””+
“负责任的”+
“”+centro.responsable.nombre+””+
“”+centro.responsable.email+””
+ ''
);
$project.mapInfoWindow.open($project.gmap,marker);
});
$project.mapBounds.extend(latlon);
}
}
它似乎工作得很好,但如果我有5个标记,单击哪一个并不重要,信息窗口总是对应于最后一个项目(位置和内容)
你知道我错过了什么吗?我认为将
标记传递给addListener就可以了。邓肯是对的,他的意思是你必须将侦听器附加到for循环之外。这不是谷歌地图特有的,而是javascript的工作方式。尝试搜索“循环的javascript闭包”或访问此链接,以获得简单的解释。问题在于google.maps.event.addListener的第三个参数。该匿名函数包含来自父作用域的变量,当使用marker click进行计算时,该变量将始终采用最后分配的值。有关更多详细信息,请参阅闭包。但是,您可以通过以下方式使用javascript函数原型的“”功能来获得所需的行为:
//inside for loop
google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));
//other codes if any...
定义handleClick
function handleMarkerClick(marker, index) {
if (typeof infowindow === 'undefined') {
infowindow = new google.maps.InfoWindow({});
}
var data = infoCentros[index]//helpful data
//create content with dynamic data
infowindow.setContent("dynamic content");
infowindow.open(marker.getMap(), marker);//modify as per your requirement
}
您需要使用闭包将内容分配给事件侦听器中的infowindow,请参见@duncan I don't knowledge,您的意思是使用此闭包<代码>信息窗口.open(marker.get('map'),marker)代码>否,您对google.maps.event.addListener
的调用应该使用外部函数,而不是匿名内联函数。我认为这应该是ca注释,而不是aswer;除非你举一个解决问题的例子,也许?在我达到50个代表之前,我不能对答案发表评论。但是你是对的,所以我稍微改变了我的答案。