Полилиния Google Maps: Нажмите на раздел полилинии и верните идентификатор - PullRequest
Новая
       34

Полилиния Google Maps: Нажмите на раздел полилинии и верните идентификатор

7 голосов
/ 30 мая 2011

У меня есть полилиния Google Maps V3. Я могу обнаружить события щелчка по всей полилинии, но могу ли я сделать что-нибудь более сложное с событием щелчка?

Что я хотел бы сделать, так это определить, по какой части полилинии щелкнули, и показать это в предупреждении. 

 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?
 });

Кто-нибудь знает, как это сделать в Картах Google?

спасибо!

Ответы [ 3 ]

11 голосов
/ 20 марта 2012

По событию щелчка вы можете получить LatLng координаты, по которой щелкнули. Однако, поскольку это, вероятно, не будет точной точкой, которая создает полилинию, вам нужно найти ближайшую точку. Вы можете использовать computeDistanceBetween в библиотеке Google Maps или использовать теорему Пифагора, поскольку она должна дать вам достаточно высокую точность в этом случае.

Вы можете найти больше информации о computeDistanceBetween здесь: https://developers.google.com/maps/documentation/javascript/reference#spherical

Вот пример кода, как вы могли бы сделать это с 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);

 });
2 голосов
/ 27 апреля 2015

Я столкнулся с тем же, проблема здесь в том, как я справился с этим: при настройке обработчика: 

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

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

Или, если вы хотите получить доступ к связанному объекту, установите его, создав переменную вPolyLine: 

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

тогда вы можете получить доступ к вашему автомобилю с события: 

alert(this.car.color);
0 голосов
/ 12 февраля 2014

Поиск ближайшей точки с помощью анализа расстояния не удастся во многих случаях, когда путь пересекает саму себя или около нее.

Вы можете использовать его для идентификации кандидатов, но вы должны подтвердить их, сравнив перекрестное произведение и / или точечное произведение из 2 созданных линий, если вы используете точку щелчка для разделить 2 последовательные точки полилинии

...