Как обработать событие click для всех полилиний, когда курсор находится на перекрывающихся полилиниях? - PullRequest
1 голос
/ 30 апреля 2019

У меня есть много полилиний на карте, и, если пользователь щелкнет некоторые из них, я хочу "выбрать" предполагаемую полилинию, но иногда полилинии могут перекрываться.Итак, если пользователь хочет выбрать один и щелкнуть 2, я хочу знать, какие полилинии были нажаты пользователем, и отобразить его.Как я могу это сделать?

Я попытался написать некоторый код, который зацикливает полилинии и проверяет, находится ли выбранное место на каком-либо чертеже, но не работает, поскольку щелчок по чертежам не означает щелчок по геолокации полилинии.

Вот мой код: ( Выполнить в JSFiddle )

// this example creates 2 polylines (one red, one blue) and add event listener
// to "click", and the handler loops over "polylines" (an array with the 2 
// polylines created)

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {
            lat: -25,
            lng: -50
        },
        mapTypeId: 'terrain'
    });
    var isOnPolyline = function (point, polyline) {
        if (point instanceof google.maps.Marker) {
            point = point.getPosition();
        }
        return google.maps.geometry.poly.isLocationOnEdge(point, polyline, 0.0001) ||
            google.maps.geometry.poly.containsLocation(point, polyline);
    };

    var red = new google.maps.Polyline({
        path: [{
            lat: -25.006,
            lng: -52
        },
        {
            lat: -25.006,
            lng: -51
        }
        ],
        map: map,
        name: "red",
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 10
    });

    red.addListener("click", function (e) {
        polylines.map(function (p) {
            if (isOnPolyline(e.latLng, p)) {
                console.log("hey, you clicked the " + p.name + " one");
            }
        });
    });

    var blue = new google.maps.Polyline({
        path: [{
            lat: -25,
            lng: -53
        },
        {
            lat: -25,
            lng: -50
        }
        ],
        name: "blue",
        map: map,
        geodesic: true,
        strokeColor: '#0000FF',
        strokeOpacity: 1.0,
        strokeWeight: 6
    });
    blue.addListener("click", function (e) {
        polylines.map(function (p) {
            if (isOnPolyline(e.latLng, p)) {
                console.log("hey, you clicked the " + p.name + " one");
            }
        });
    });

    var polylines = [red, blue];
}

, поэтому я попытался щелкнуть, как показано на рисунке (курсор - желтый круг):

enter image description here

Я ожидал, что журналы консоли:

"эй, ты нажал на красную

эй, ты нажал насиний "

Но ничего не было зарегистрировано.

...