Javascript 如何在google map api中创建多个信息窗口_Javascript_Google Maps Api 3_Google Maps Markers_Infowindow

Javascript 如何在google map api中创建多个信息窗口

javascript google-maps-api-3

Javascript 如何在google map api中创建多个信息窗口,javascript,google-maps-api-3,google-maps-markers,infowindow,Javascript,Google Maps Api 3,Google Maps Markers,Infowindow,我在地图中创建了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" ty

我在地图中创建了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>


var json=[
{
“标题”：“斯德哥尔摩”，
“lat”：59.3，
“液化天然气”：18.1，
“描述”：“斯德哥尔摩是瑞典的首都和最大城市，是斯堪的纳维亚半岛人口最多的城市区，大都市区人口210万（2010年）”
},
{
“标题”：“奥斯陆”，
“lat”：59.9，
“液化天然气”：10.8，
“描述”：“奥斯陆是一个直辖市，是挪威首都和人口最多的城市，大都市人口为1442318人（截至2010年）。”
},
{
“标题”：“哥本哈根”，
“lat”：55.7，
“液化天然气”：12.6，
“描述”：“哥本哈根是丹麦首都和人口最多的城市，大都市人口1931467人（截至2012年1月1日）。”
}
]
var myCenter=newgoogle.maps.LatLng（51.508742，-0.120850）；
函数初始化（）
{
var mapProp={
中心：迈森特，
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
for（var i=0，length=json.length；i

问题在于，如果您尝试在循环中为信息窗口分配内容。然后，当您单击标记时，它只知道循环最后一次迭代的内容。你需要一个了结。有两种不同的方法来处理这个问题，我通常是这样做的：

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);
    });
}

函数初始化（）{
var mapProp={
中心：迈森特，
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var infowindow=new google.maps.infowindow({
内容：“”
});
for（var i=0，length=json.length；i

你知道为什么在本例中信息窗口不会弹出吗？标记都正确显示在我的地图上，但数据在

infowindow.setContent（strDescription）中设置没有显示。@gjw80您可能需要问自己的问题，这样我们才能看到您的所有代码，以帮助诊断问题。如果您有兴趣查看，我在这里创建了一个：