0
我試圖在地圖上的點之間繪製一條路徑。我有一個2分的數組（爲我的測試）。 我可以很容易地在地圖上繪製它們，但它看起來像方向服務沒有按預期工作。谷歌地圖導航服務2點之間的計算路徑
這是我應該得到根據谷歌地圖： 
但是，這是我所得到的： 
這裏是Jsfiddle。
這裏是我的測試代碼：
var map = undefined;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(-33.885026, 151.268316),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 14
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
jQuery(document).ready(function($)
{
initialize();
loadPaths(map);
});
function loadPaths(gmap)
{
var latlngbounds = new google.maps.LatLngBounds(),
infoWindow = new google.maps.InfoWindow(),
pathPoints = [],
index=0,
positions = [
{latitude: "-33.88914",longitude: "151.25673"},
{latitude: "-33.888",longitude: "151.2623"},
];
// The fix
positions.reverse();
$.each(positions, function(k, v) {
var myLatlng = new google.maps.LatLng(v.latitude, v.longitude);
pathPoints.push(myLatlng);
index++;
});
// Intialize the Path Array
var path = new google.maps.MVCArray();
// Intialise the Direction Service
var service = new google.maps.DirectionsService();
var iconSymbol = {
path: 'M 40 20 L 80 20 L 100 40 L 100 140 L 20 140 L 20 40 Z',
anchor: new google.maps.Point(60, 10),
scale: 0.15,
strokeColor: '#000000',
strokeWeight: 1,
fillColor: 'steelblue',
fillOpacity: 0.8,
};
// Set the Path Stroke Color
var poly = new google.maps.Polyline({
map: gmap,
strokeColor: '#dd0000',
icons: [{
icon: iconSymbol
}]
});
// Draw the path for this vehicle
// We compute the path between each point to follow the road
for (var i = 0; i < pathPoints.length; i++) {
// If it's not the last point
if ((i + 1) < pathPoints.length) {
var src = pathPoints[i];
var des = pathPoints[i + 1];
// We had the starting point to the poly path
path.push(src);
// We compute the path between the 2 points
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// We add the new computed points
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
// Set the path of the polyline to draw it
poly.setPath(path);
}
UPDATE
我固定的路徑感謝的問題@anto 但我仍然有一個問題的時間時間，道路不會被吸引。我認爲這是與服務回調函數asynchronous問題，但我不知道如何解決它。 如果我重新啓動腳本中的jsfiddle它的工作隨意，但有時我結束了這種繪圖：
更新2
它看起來像使用遞歸函數正在修復它的大部分，除了我的最後一點沒有畫出：http://jsfiddle.net/maxwell2022/wY32u/11/
你確定這是雙向的起點？旅行模式WALKING返回的路徑較短。 –
如果您在開始/停止時交換緯度/經度值，您將在Google Map站點獲得相同的路徑。 –
正確，我必須更新我的問題，因爲我仍然有3分的問題。 – maxwell2022