Ответ 1
Хорошо, поэтому мне удалось это решить. Это не совсем элегантно, и я уверен, что его можно было бы улучшить, но вот общая концепция, которую я придумал:
Я создаю массив точек latlng из файла GPX, но они регистрируют только точки каждые 20 или около того. Это недостаточная гранулярность для моих целей, так что я сделал, я заполнил массив точек примерно с 10 точками (по линейной линии) между каждой парой точек, занесенных в журнал gpx:
$.each(array_of_points_to_pad, function(key, pt) {
var current_point = pt;//The current point
var next_point = array_of_points_to_pad[key + 1];//The point immediately after the current point
//Check that we're not on the last point
if (typeof next_point !== 'undefined') {
//Get a 10th of the difference in latitude between current and next points
var lat_incr = (next_point.lat() - current_point.lat()) / 10;
//Get a 10th of the difference in longitude between current and next points
var lng_incr = (next_point.lng() - current_point.lng()) / 10;
//Add the current point to a new padded_points array
padded_points.push(current_point);
//Now add 10 additional points at lat_incr & lng_incr intervals between current and next points (in the new padded_points array)
for (var i = 1; i <= 10; i++) {
var new_pt = new google.maps.LatLng(current_point.lat() + (i * lat_incr), current_point.lng() + (i * lng_incr));
padded_points.push(new_pt);
}
}
});
Теперь, когда у меня есть более четкий массив точек, я использую это для построения полилинии. Проложенная полилиния не будет выглядеть иначе, чем полилиния, нарисованная без прокладки, так как все дополнительные точки лежат на линейной линии "как ворона" между существующими точками.
var line = new google.maps.Polyline({
path: polyline_path_points_padded,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
line.setMap(map);
Теперь я добавляю маркер перетаскивания в начале строки:
var latLng = new google.maps.LatLng(startlat,startlng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable:true
});
Все, что осталось сделать, это управлять событиями перетаскивания и перетаскивания этого маркера:
google.maps.event.addDomListener(marker,'dragend',function(e){
marker.setPosition(find_closest_point_on_path(e.latLng,padded_points));
});
google.maps.event.addDomListener(marker,'drag',function(e){
marker.setPosition(find_closest_point_on_path(e.latLng,padded_points));
});
Здесь мы просто отправляем latLng маркера в функцию find_closest_point_on_path() во время перетаскивания и когда маркер отбрасывается. Мы отправляем заполненный массив точек в качестве пути к поиску.
Функция выглядит следующим образом:
function find_closest_point_on_path(marker_pt,path_pts){
distances = new Array();
distance_keys = new Array();
$.each(path_pts,function(key, path_pt){
var R = 6371; // km
var dLat = (path_pt.lat()-marker_pt.lat()).toRad();
var dLon = (path_pt.lng()-marker_pt.lng()).toRad();
var lat1 = marker_pt.lat().toRad();
var lat2 = path_pt.lat().toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
//Store the key of the point on the path that matches this distance
distance_keys[d] = key;
});
//Return the latLng pt on the path for the second closest point
return path_pts[distance_keys[_.min(distances)]+1];
}
Что делает эта функция (с помощью градуса к радианам), она находит расстояние между положением маркеров и всеми точками на линии. Затем он находит ближайшую точку к маркеру и возвращает координаты для ближайшей ближайшей точки после этого. Таким образом, когда вы перетаскиваете маркер, он "привязывается" к следующей точке (вместо того, чтобы застревать в одном месте).
Рабочий скрипт JS Ниже:
Не проверяйте кросс-браузер. Работа в последней версии Chrome.