Polilínea de Google Maps: haga clic en la sección de polilínea y devuelva ID?

Question

Tengo una polilínea V3 de Google Maps. Puedo detectar eventos de clic en toda la polilínea, pero ¿puedo hacer algo más avanzado con el evento click?

Lo que me gustaría hacer es detectar en qué sección de la polilínea se ha hecho clic y mostrar esto en una alerta.

routePath = new google.maps.Polyline({ 
    path: routeCoordinates, 
    strokeColor: "#CC33FF", 
    strokeWeight: 3 
});  
routePath.setMap(map); 
google.maps.event.addListener(routePath, 'click', function() { 
    alert(routePath); 
    // TODO: display which section of the polyline has been clicked? 
}); 

¿Alguien sabe cómo hacer esto en Google Maps?

gracias!

Answer 1

En el evento click puede recibir un LatLng de la coordenada que se hizo clic. Sin embargo, dado que probablemente este no sea un punto exacto que crea la polilínea, necesita encontrar el punto más cercano. Puede usar el computeDistanceBetween en la biblioteca de Google Maps o puede usar el teorema de Pitágoras, ya que debería proporcionarle una precisión suficiente en este caso.

Puede encontrar más información sobre computeDistanceBetween aquí: https://developers.google.com/maps/documentation/javascript/reference#spherical

Aquí es un ejemplo de código cómo podría hacerlo con la computeDistanceBetween.

google.maps.event.addListener(routePath, 'click', function(h) { 
    var latlng=h.latLng; 
    alert(routePath); 
    var needle = { 
     minDistance: 9999999999, //silly high 
     index: -1, 
     latlng: null 
    }; 
    routePath.getPath().forEach(function(routePoint, index){ 
     var dist = google.maps.geometry.spherical.computeDistanceBetween(latlng, routePoint); 
     if (dist < needle.minDistance){ 
      needle.minDistance = dist; 
      needle.index = index; 
      needle.latlng = routePoint; 
     } 
    }); 
    // The closest point in the polyline 
    alert("Closest index: " + needle.index); 

    // The clicked point on the polyline 
    alert(latlng); 

}); 

Answer 2

Encontrar el punto más cercano al análisis de distancia fallará en muchos casos en un camino cruza hacia atrás sobre o cerca de sí mismo.

Se puede utilizar para identificar candidatos, pero debe confirmarlos mediante la comparación de la cross product y/o dot product de las 2 líneas creadas si se utiliza el punto de clic para dividir 2 puntos de polilínea consecutivos

Answer 3

me encontré con el misma, cuestión aquí es la forma en que se ocupó de él: al configurar el manejador:

google.maps.event.addListener(routePath, 'click', function(e) { 
    handelPolyClick(e, this) 
}); 

var handelPolyClick(eventArgs, polyLine) { 
    // now you can access the polyLine 
    alert(polyLine.strokeColor); 
}); 

O si lo desea acceder a un objeto relacionado se establece mediante la creación de una variable en la línea poligonal:

routePath.car = $.extend({}, cars[1]); // shallow copy of cars[1] 

continuación, puede acceder a su vehículo en el evento:

alert(this.car.color);