Question

我从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的声明，但要么不能解决问题，要么导致同时打开多个气球。

我该如何解决这个问题？

Answer 1

观察到的行为的原因是，在执行事件监听器功能时 - 即在鼠标单击时 - 循环已完成。因此，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);
    }
}

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

1 个答案: