¿Cómo manejar el evento de clic en todas las polilíneas cuando el cursor está en polilíneas superpuestas?

2 minutos de lectura

Tengo muchas polilíneas en el mapa y, si el usuario hace clic en algunas, quiero “seleccionar” la polilínea deseada, pero a veces las polilíneas pueden superponerse. Entonces, si el usuario quiere seleccionar uno y hacer clic en 2, quiero saber en qué polilíneas hizo clic el usuario y mostrarlo. ¿Cómo puedo hacer eso?

Traté de escribir un código que recorre las polilíneas y verifica si la ubicación en la que se hizo clic está en algún dibujo, pero no funciona porque hacer clic en los dibujos no significa hacer clic en la geolocalización de la polilínea.

Aquí está mi código: (Ejecutar en 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];
}

así que traté de hacer clic como se muestra en la figura (el cursor es el círculo amarillo):

ingrese la descripción de la imagen aquí

Esperaba los registros de la consola:

“oye, hiciste clic en el rojo

Oye, hiciste clic en el azul”

Pero no se registró nada.

  • No hay marcador amarillo en el código publicado (o violín), ¿de dónde vino eso?

    – geocodezip

    30 de abril de 2019 a las 20:42

  • pero realmente no existe tal marcador, el círculo amarillo representa la posición del cursor cuando se dispara el clic. Solo digo “oye, estoy haciendo clic aquí sobre 2 polilíneas, házmelo saber”

    – Rodrigo G Rodrigues

    2 de mayo de 2019 a las 12:07

¿Ha sido útil esta solución?