地图上有多条多段线时触发不正确的多段线点击

Question

我在 Google 地图上有多条折线，并为每条添加了一个 'click' 事件处理程序。所有这些折线都是通过 javascript 代码添加的。但是，当我单击地图上的任何多段线时，将触发最后添加的多段线的单击事件。这使得很难识别单击的行。

创建折线的代码是：

    $.ajax({
                type: "GET",
                url: "MapData.html",
                success: function (json) {
                    mapData = JSON.parse(json);
                    var newroad;
                    for (var i = 0; i < mapData.length; i++) {
                        newroad = new google.maps.Polyline({
                            ID: mapData[i].ID,
                            path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs),
                            strokeColor: 'blue',
                            strokeOpacity: 0.75,
                            strokeWeight: 3
                        });

                        newroad.setMap(map);
                        google.maps.event.addListener(newroad, 'click', function () {

                            setSelectedRoad(newroad);
                        });
                    }
                },
                error: function () {
                    alert('Critical Data Failure');
                }
            });

数据已从服务器正确获取，所有多段线均按预期显示为蓝色。单击折线时调用的函数是

    function setSelectedRoad(road) {
        road.strokeColor = 'black';
        road.setOptions({ strokeColor: 'black', strokeOpacity: 1.0 });
        selectedRoadID = road.ID;
    }

然而，"selectedRoadID" 始终是最后添加的折线，并且该线的颜色变为黑色，即使单击任何其他折线也是如此。

令人困惑的是，如果我在地图上绘制一条新的多段线并将其点击事件设置为相同的函数，那么它就可以正常工作。我确实为单击的多段线获得了正确的 ID。这适用于绘制的任意数量的新线，并且适用于以任意顺序单击它们。

Answer 1

问题是你在循环执行此操作：

newroad = new google.maps.Polyline({ ... });

google.maps.event.addListener(newroad, 'click', function () {
     setSelectedRoad(newroad);
});

所以你重新创建 newroad 比方说 10 次。每次创建它时，您都会为同一个变量提供一个新的事件侦听器，即您要覆盖同一个事件侦听器 10 次。不创建 10 个单独的事件侦听器，每条折线一个。

当您点击多段线时，您只是在执行最后一个版本的事件侦听器。

相反，您需要将事件侦听器与循环分开。像这样：

$.ajax({
    type: "GET",
    url: "MapData.html",
    success: function (json) {
        mapData = JSON.parse(json);
        var newroad;
        for (var i = 0; i < mapData.length; i++) {
            newroad = new google.maps.Polyline({
                ID: mapData[i].ID,
                path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs),
                strokeColor: 'blue',
                strokeOpacity: 0.75,
                strokeWeight: 3,
                map: map
            });

            bindEvent(newroad);
        }
    },
    error: function () {
        alert('Critical Data Failure');
    }
});

function bindEvent(newroad) {
    newroad.addListener('click', function () {
        setSelectedRoad(this);
    });
}

这样你调用 bindEvent 10 次，每次为 newroad 使用不同的参数。因此，您每次为 newroad 创建 10 个具有不同值的独立事件侦听器。

Answer 2

我发现改变

    newroad.setMap(map);
    google.maps.event.addListener(newroad, 'click', function () {

           setSelectedRoad(newroad);
    });

至

    newroad.setMap(map);
    google.maps.event.addListener(newroad, 'click', function () {

           setSelectedRoad(this);
    });

修复了一切。

地图上有多条多段线时触发不正确的多段线点击

Incorrect Polyline Click fired when having multiple Polylines on Map

google-maps

google-maps-api-3

onclick

polyline

google-polyline