Нарисуйте полилинию на основе пользовательского щелчка и/или текущего местоположения пользователя

Question

В настоящее время я строю webapp, чтобы нарисовать маршруты моего городского общественного транспорта (которых нет в Google Maps). Я использую закодированные полилинии для их отображения и создал <ul>, из которого они могут быть выбраны вручную. Он отлично работает, но требует дополнительной функциональности.

Что я хочу, так это то, что когда пользователь нажимает точку на карте или использует функцию геолокации, маршруты (как предопределенные полилинии), которые проходят мимо, набираются.

Я читал документацию containsLocation(), но, похоже, это не трюк. Есть ли конкретная библиотека, которую мне не хватает для этого?

Уже искали много и не можете найти то, что я хочу.

В настоящее время это код, который рисует ломаную линию (При вызове из <li onclick='drawfunction()';> элемента):

function (drawingfunction) { 

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 

    var decodedPath = google.maps.geometry.encoding.decodePath('encodedpolyline'); 

    var decodedLevels = decodeLevels('encodedlevels'); 
    } 

Answer 1

Я думаю, что вы хотите, чтобы проверить функцию google.maps.geometry.poly.isLocationOnEdge.

Предположим, что ваш маршрут Polyline s находятся в routes массиве:

for (var i = 0; i < routes.length; i++) { 
    var matching = google.maps.geometry.poly.isLocationOnEdge(
     location, routes[i], TOLERANCE); 

    routes[i].setOptions({ 
    strokeColor: matching ? MATCHING_COLOR : DEFAULT_COLOR, 
    strokeOpacity: matching ? 1 : .7 
    }); 
} 

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

Это может быть довольно медленно, если у вас много маршрутов (или сложных маршрутов). Если это так, то вам нужно исследовать структуру данных, такую ​​как quad tree, чтобы сузить маршруты до вызова .