我尝试使用 javascript 将多个标记和信息窗口添加到谷歌地图。下面是代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [ '1961 East Mall Vancouver BC',
'2366 Main Mall Vancouver BC', '2053 Main Mall, Vancouver, BC ' ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 14,
center : new google.maps.LatLng(49.26526, -123.250541),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var geocoder = new google.maps.Geocoder();
geocoder
.geocode(
{
'address' : locations[i]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map : map,
position : results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: '
+ status);
}
});
//add info window
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
}
})(marker, i));
//end of adding info window
}//end of for loop
</script>
</body>
</html>
(感谢Google Maps JS API v3 - 简单的多标记示例)
问题是:除非我评论
//add info window
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
}
})(marker, i));
//end of adding info window
单击时,我只会得到一个没有信息窗口弹出窗口的标记。
如果我在代码块上方发表评论,我会得到三个标记,但也不会弹出信息窗口。
我在哪里犯错了?
谢谢你。