如何在谷歌地图api中创建多个信息窗口
Posted
技术标签:
【中文标题】如何在谷歌地图api中创建多个信息窗口【英文标题】：How to create multiple infowindow in google map api 【发布时间】：2013-05-12 10:16:14 【问题描述】：我在地图中创建了 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>
【问题讨论】：
【参考方案1】：问题在于，如果您尝试在循环中将内容分配给信息窗口。然后，当您单击标记时，它只知道循环最后一次迭代的内容。你需要一个闭包。有几种不同的方法来处理这个问题，我通常是这样做的：
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);
);
【讨论】：
知道为什么在这个例子中信息窗口根本不会弹出吗？标记都正确显示在我的地图上，但是当我单击标记时，infowindow.setContent(strDescription); 中设置的数据没有显示。
@gjw80 你可能需要问你自己的问题，所以我们可以看到你所有的代码，以帮助诊断问题
我在这里创建了一个，如果您有兴趣查看它：***.com/questions/19635172/…以上是关于如何在谷歌地图api中创建多个信息窗口的主要内容，如果未能解决你的问题，请参考以下文章
如何使用我的 JSON 数据在谷歌地图 API 上创建标记？
如何在谷歌地图中创建一个带有气泡聊天背景的自定义标记，以及像调情地图这样的图像右上角的数字？