上下文:我在折线上设置一个动画图标,代表一辆从A点到B点的汽车。在某个时间点,汽车的燃油含量很低,因此,我需要去到加油站,然后继续点B。
因此,当汽车燃油不足时,我计算汽车的当前位置并从当前位置向B点发出指示请求,加油站作为一个航点。
一旦我得到答案,我就会更新汽车动画的折线(我保留完成的部件并用新路线替换其余部分)。
问题是计算出的汽车“当前位置”太不准确了(即计算出的位置与折线上图标的实际位置不同)。
这是一个最小的工作示例及其fiddle:
var map;
var line;
var first_path;
function initMap() {
pointA = new google.maps.LatLng(50.931300, 4.226360);
pointB = new google.maps.LatLng(48.858370, 2.294481);
var myOptions = {
zoom: 7,
center: pointA
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
avoidTolls: true,
avoidHighways: false,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//directionsDisplay.setDirections(response);
console.debug(response);
first_path = response.routes[0].overview_path;
// Make polyline on the path
line = new google.maps.Polyline({
path: first_path,
strokeColor: 'black',
strokeOpacity: 1,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
strokeColor: '#393',
strokeOpacity: 0.8
},
offset: '90%'
}]
});
line.setMap(map);
// Add a marker at the same position as the icon --> INACCURATE
var loc = line.GetPointAtDistance(line.Distance() * 0.9);
var marker = new google.maps.Marker({
position: loc,
map: map,
title: 'Wrong position!'
});
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
initMap();
请注意,我正在使用Epoly V3库进行此计算。
是否还有其他库或方法来计算可能有用的当前位置?