谷歌地图信息窗口为每个标记显示相同的内容
Google Maps infowindow shows same content for each marker
我正在处理一个涉及谷歌地图API和信息窗口的问题。当我点击一个标记时,会弹出一个信息窗口,我正试图使其成为这样,当这种情况发生时,该标记的lat/lng会显示在信息窗口中。在这种情况下,lat/lng存储在停止阵列中:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var marker;
var infowindow; //Global infowindow created
function initialize() {
var latlng = new google.maps.LatLng(37.784, -122.408);
var stops = new Array();
stops = [
new google.maps.LatLng(37.7655, -122.4525899),
new google.maps.LatLng(37.7649999, -122.45656),
new google.maps.LatLng(37.7643, -122.4608199),
];
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(37.7655, -122.4525899)
};
map = new google.maps.Map(document.getElementById("content"),
myOptions);
infowindow = new google.maps.InfoWindow({ //infowindow options set
maxWidth: 355
});
var i = 0;
for (i < 0; i < stops.length; i++) {
marker = new google.maps.Marker({
position:stops[i],
map: map,
title: "Stop Coords: "+ stops[i]
});
var len=stops.length;
popupDirections(marker, len, stops);
}
}
function popupDirections(marker, len,stops) {
//this function created listener listens for click on a marker
google.maps.event.addListener(marker, 'click', function () {
for (var i = 0; i < len; i++)
{ infowindow.setContent("Stop coords: " + stops[i]); } //sets the content of your global infowindow to string "Tests: "
infowindow.open(map, marker); //then opens the infowindow at the marker
});
}
现在,当我将鼠标悬停在每个标记上时,会显示正确的lat/lng,但当我点击标记并弹出信息窗口时,我会不断获得停止的lat/lg[2]。我不确定问题出在哪里,我对JS的了解非常有限,我很幸运在这里早些时候找到了一篇有用的帖子,展示了如何创建信息窗口。
在我看来,解决问题的最佳方法是为每个标记提供自定义对象属性stopCoords
:
for (i < 0; i < stops.length; i++) {
marker = new google.maps.Marker({
position: stops[i],
map: map,
title: "Stop Coords: " + stops[i],
stopCoords: stops[i]
});
var len = stops.length;
popupDirections(marker, len, stops);
}
然后,在popupDirections
函数中,重新引用它(UPDATE或使用marker.position
。但关键是,您可以将stopCoords
设置为任何您想要的值)。
for (var i = 0; i < len; i++) {
infowindow.setContent("Stop coords: " + marker.stopCoords);
}
演示http://jsfiddle.net/yV6xv/580/
我将抛出一些流行语来解释为什么您的原始代码不起作用:与变量范围和闭包有关。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- gmap3 在信息窗口中显示地址
- 在谷歌地图信息窗口中显示动态内容
- 更新面板中的谷歌地图api-信息窗口中的HTML不会显示在刷新更新面板上
- 如何在信息窗口中显示我的地理编码地址?谷歌地图API
- 使用Rails 3.1在google地图信息窗口中显示多个标记的链接
- 在信息窗口中显示标记位置的谷歌地图API
- 在信息窗口中显示反向地理编码地址
- 执行谷歌地图反向地理编码,并将结果作为HTML内容的一部分显示在信息窗口中
- 可以't在信息窗口中显示内容,I'm使用谷歌地图API v3
- 在标记单击时在信息窗口中显示数组中的内容
- 在信息窗口中分配图像,并根据选项开关显示它们