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

google maps multiple markers with multiple info window

本文关键字：映射 窗口 信息 谷歌 信息窗      更新时间：2023-09-26

我正在尝试在我的页面上放置一个带有多个标记（>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>

看起来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

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

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

除了Kai提到的全局与局部变量之外，你还需要弄清楚函数的闭包。简而言之，分配信息窗口及其描述的代码片段和添加事件侦听器的代码片段需要是一个单独的函数。

有关更多详细信息，请参阅上面的文章。

相关文章：