谷歌用多个信息窗口映射多个标记

时间:2013-08-02 02:14:03

标签: javascript google-maps google-maps-api-3

我正在尝试使用多个标记(> 1000)在我的网页上放置谷歌地图,每个地图都有自己独特的信息窗口。我正在通过数组添加标记,标记看起来很好,但所有信息窗口都具有相同的确切内容。我很茫然,非常感谢你的信息。这是我的代码:

<script>
var map;
var markersArray = [];
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

function initialize() {

    bounds = new google.maps.LatLngBounds();

    usa = new google.maps.LatLng(37.09024, -95.712891);

    var myOptions = {
        zoom: 4, 
        center: usa,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    plotMarkers();
}

// here is where the array content is contained
var webApps = [<%=strArray%>];

function plotMarkers(){
    var i;
    for(i = 0; i < webApps.length; i++){
        codeAddresses(webApps[i]);
    }
}

function codeAddresses(address){

    // other variables
    lat = address[3];
    lng = address[4];
    desc = address[0]

    myLatlng = new google.maps.LatLng(lat,lng);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    });

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

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width: 100%; height: 600px;"></div>

2 个答案:

答案 0 :(得分:2)

看起来desc是一个全局变量。因此,在循环的每次迭代中,您将其设置为其他内容,这意味着它将始终等于您迭代的最后一项的描述。

尝试将var放在它前面,使其成为局部变量。例如:var desc = address[0];

执行此操作时,称为“闭包”的概念将确保您创建的每个侦听器在创建时都引用desc的值,而不是上次设置的值。

最佳做法是避免使用全局变量,原因有几个,这就是其中之一。您应养成使用var为变量添加前缀的习惯。

有关变量范围的信息:

http://msdn.microsoft.com/en-us/library/ie/bzt2dkta(v=vs.94).aspx

关闭的信息:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

答案 1 :(得分:0)

我遇到了同样的问题,最终发现在文档中有一篇文章解决了这个问题:

https://developers.google.com/maps/documentation/javascript/examples/event-closure

除了Kai提到的全局与局部变量之外,您还需要弄清楚函数闭包。简而言之,您分配信息的代码片段以及添加事件监听器的位置将需要是一个单独的函数。

有关详细信息,请参阅上面的文章。