Question

我的地图，法国，巴黎和格陵兰有3个点。

弹出窗口仅在巴黎开放，而不是在其他人开放

这是我的代码：

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

    var arr =  [{id:1,latitude_chargement:60.05,longitude_chargement:-43.1667,title:"THIS IS FRANCE"},{id:2,latitude_chargement:45.7604,longitude_chargement:5.68552,title:"THIS IS GREENLAND"},{id:3,latitude_chargement:48.853873,longitude_chargement:2.351074,title:"THIS IS PARIS"}];


    for(i = 0; i < arr.length; i++) 
    {  
        marker =  new google.maps.Marker({
        position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
        map  : map,
        title: arr[i].title,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });


      var contentString = '<div id="content">'+arr[i].title+'</div>';

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    }


    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

    marker.setMap(map);



}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

这是一个经常出现的误解。你只有一个infowindow，它的内容会更新三次（在你的“for”循环中），但它仍处于第三次更新后的状态，之后永远不会改变，特别是当你打开它点击一个标记时（一个infowindow，相同的内容;顺便说一下，我不明白为什么它是巴黎，因为巴黎出现在你的阵列中......）。

这里有两个解决方案：您需要为每个标记存储infoWindows参考（例如，构建一个infowindow数组），或者只使用一个并在事件监听器中更新其内容：当用户点击标记时，您将获取适当的内容，填写infowindow然后显示它。

这个链接在这个主题上节省了我的一天，非常精确，非常有教育意义：

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

..来自StackOverflow：Multiple Google Maps infowindow

祝你好运

Answer 2

这是工作代码，

<html>
    <head>
        <title>Log In Page</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
        <script>
            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);
                var arr =  [{id:1,latitude_chargement:45.7604,longitude_chargement:5.68552,title:"THIS IS FRANCE"},{id:2,latitude_chargement:60.05,longitude_chargement:-43.1667,title:"THIS IS GREENLAND"},{id:3,latitude_chargement:48.853873,longitude_chargement:2.351074,title:"THIS IS PARIS"}];
                var contentString;
                var infowindow = new google.maps.InfoWindow();
                for(i = 0; i < arr.length; i++) 
                {  
                    contentString = '<div id="content">'+arr[i].title+'</div>';
                    var marker =  new google.maps.Marker({
                        position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
                        map  : map,
                        title: arr[i].title,
                        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                        content:contentString
                    });



                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map, this);
                        infowindow.setContent(this.content); 
                    });

                    marker.setMap(map);


                }


            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

        <style>
            #googleMap {
                width:600px;
                height:600px;
            }
        </style>
    </head>
    <body>
        <div id="googleMap"></div>
    </body>
</html>

你的法国和格陵兰坐标也被交换了

Answer 3

这是一个常见的closure问题。

只需用以下代码替换你的循环：

for(i = 0; i < arr.length; i++) 
{
    (function(i) {
         //Your code
    })(i);
}

谷歌地图Api - Popup只在一点开放，而不是在其他点上开放

3 个答案: