У меня есть приложение, которое получает ограниченные данные о путевых точках, и хотя Google Maps Road Snapping делает замечательную работу по угадыванию правильных дорог на основе этих данных, я все еще испытываю уровень неточности, который не будет работать для нашего приложения. .
В этом примере фиолетовые маркеры представляют реальные «исходные» путевые точки, которые отправляются, а синие маркеры показывают привязанные данные путевых точек, возвращаемые из Google на основе данных из исходных путевых точек. Я использую привязанные синие путевые точки для создания ломаной линии, чтобы показать маршрут (фиолетовая ломаная линия), к сожалению, привязанные путевые точки и последующий маршрут должны действительно больше походить на красную ломаную линию.
Я вручную проверил это на онлайн-демонстрации API с похожими «исходными» путевыми точками, и маршрут по-прежнему привязан к неправильному, поэтому я могу только предположить, что Google просто не хватает данных для точного привязки. Вопрос в том, есть ли способ повысить шансы на правильный щелчок, учитывая такие ограниченные данные? Есть ли способ, которым я мог бы интерполировать ограниченные исходные путевые точки, чтобы попытаться «направить» Google, чтобы обеспечить более точную привязку?
Вот код, похожий на тот, который я использую: JSFiddle здесь
//setup vars
var trip = [{
"lat": -27.068,
"lng": 153.1483
}, {
"lat": -27.0642,
"lng": 153.1546
}, {
"lat": -27.0552,
"lng": 153.156
}, {
"lat": -27.0518,
"lng": 153.1563
}, {
"lat": -27.0503,
"lng": 153.1552
}, {
"lat": -27.0457,
"lng": 153.1456
}, {
"lat": -27.042,
"lng": 153.1463
}, {
"lat": -27.0349,
"lng": 153.1476
}];
var unsnappedWaypoints = [];
var snappedWaypoints = [];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 0,
lng: 0
}
});
var bounds = new google.maps.LatLngBounds();
//add each waypoint to an array of lat/lngs
$.each(trip, function(key, waypoint) {
unsnappedWaypoints.push(waypoint.lat + ',' + waypoint.lng);
var marker = new google.maps.Marker({
map: map,
icon: 'http://mt.google.com/vt/icon/name=icons/spotlight/spotlight-ad.png',
position: {
lat: waypoint.lat,
lng: waypoint.lng
}
});
});
//perform Google Maps API call with joined array for snapped results
$.ajax({
url: 'https://roads.googleapis.com/v1/snapToRoads?path=' + unsnappedWaypoints.join('|') + '&key=AIzaSyA1JWR3ohBFQ_P7F5eSMSJb0dwV9PbB3pA&interpolate=true',
crossDomain: true,
dataType: 'jsonp'
}).done(function(response) {
//iterate through returned waypoints to create array of lat/lngs for polyline
$.each(response, function(key, snappedPoints) {
$.each(snappedPoints, function(key, snappedPoint) {
snappedWaypoints.push({
lat: snappedPoint.location.latitude,
lng: snappedPoint.location.longitude
});
//add snapped waypoints to map to show difference between originals and returned
var marker = new google.maps.Marker({
map: map,
icon: 'http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-blue.png',
position: {
lat: snappedPoint.location.latitude,
lng: snappedPoint.location.longitude
}
});
//increase the bounds to take into account waypoints
bounds.extend(new google.maps.LatLng(snappedPoint.location.latitude, snappedPoint.location.longitude));
});
});
//create polyline from snapped waypoints
var tripRoute = new google.maps.Polyline({
path: snappedWaypoints,
gseodesic: true,
strokeColor: '#663496',
strokeOpacity: 1.0,
strokeWeight: 2
});
tripRoute.setMap(map);
//fit these bounds to the map
map.fitBounds(bounds);
});