在一个循环中生成一个标记数组，并为它们分配不同的弹出窗口

Generate an array of markers in one loop and assign different popup to all of them

本文关键字：一个 分配 窗口 数组 循环      更新时间：2023-09-26

我从JSON字符串加载一个标记数组。JSON字符串包含需要在每个标记的弹出窗口中显示的标记位置和信息。

我有以下代码 
function AddAllMarkers(markersJSON){
        var tempArray = JSON.parse(markersJSON);
        infoWindow = new google.maps.InfoWindow(); 
        for(var i = 0; i < tempArray.Locations.length; i++){
            var obj = tempArray.Locations[i];
            var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);
            var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->;
            var markerTemp = new google.maps.Marker({
                position: point,
                icon:obj.Icon
            });
            google.maps.event.addListener(markerTemp, 'click', function() {
                infoWindow.close();
                infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(contentString);
                infoWindow.open(map, this);
            });
            markerArray.push(markerTemp);
        }
    }

当这个函数被调用时，我正确地加载了所有的标记，但是所有的标记都显示了最后加载的标记的弹出。我做错了什么?我确实尝试过移动infoWindow的声明，但要么不能解决问题，要么会导致多个气球同时打开。

我该如何解决这个问题?

观察到这种行为的原因是，在事件侦听器函数执行的时候——也就是鼠标单击的时候——循环已经完成。因此，contentString变量将保存上次循环迭代的值。

作为一种解决方法，您可以将内容字符串附加到标记本身，并使用事件处理程序中的this引用访问它。

function AddAllMarkers(markersJSON){
    var tempArray = JSON.parse(markersJSON);
    infoWindow = new google.maps.InfoWindow(); 
    for(var i = 0; i < tempArray.Locations.length; i++){
        var obj = tempArray.Locations[i];
        var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);
        var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->
        var markerTemp = new google.maps.Marker({
            position: point,
            icon:obj.Icon
        });
        markerTemp.contentString = contentString;
        google.maps.event.addListener(markerTemp, 'click', function() {
            infoWindow.close();
            infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(this.contentString);
            infoWindow.open(map, this);
        });
        markerArray.push(markerTemp);
    }
}
相关文章：