javascript 如何在谷歌地图api中创建多个信息窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16605758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create multiple infowindow in google map api
提问by duncan
I create 3 markers in the map whose data comes from a json. but when I click on a marker and try to open the Info window only the last marker will response correctly.. please help me.... this the code....
我在地图中创建了 3 个标记，其数据来自 json。但是当我点击一个标记并尝试打开信息窗口时，只有最后一个标记会正确响应......请帮助我......这是代码......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
</head>
<body>
<script>
var json = [
{
"title": "Stockholm",
"lat": 59.3,
"lng": 18.1,
"description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
},
{
"title": "Oslo",
"lat": 59.9,
"lng": 10.8,
"description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
},
{
"title": "Copenhagen",
"lat": 55.7,
"lng": 12.6,
"description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
}
]
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
for (var i = 0, length = json.length; i < length; i++) {
var data=json[i];
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
var infowindow = new google.maps.InfoWindow({
content: data.description
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="width:100%;height:100%;"></div>
</body>
</html>
回答by duncan
The problem is if you try and assign content to the infowindow within a loop. Then when you click the marker, it only knows about the content from the very last iteration of the loop. You need a closure instead. There's a couple of different ways to handle this, here's how I usually do it:
问题是如果您尝试将内容分配给循环内的信息窗口。然后当您单击标记时，它只知道循环最后一次迭代的内容。你需要一个闭包。有几种不同的方法来处理这个问题，这是我通常的做法：
function initialize() {
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var infowindow = new google.maps.InfoWindow({
content: ""
});
for (var i = 0, length = json.length; i < length; i++) {
var data=json[i];
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
bindInfoWindow(marker, map, infowindow, data.description);
}
}
function bindInfoWindow(marker, map, infowindow, description) {
marker.addListener('click', function() {
infowindow.setContent(description);
infowindow.open(map, this);
});
}
