Mapbox通過兩個標記繪制方向

Question

如果我有這兩點的坐標，我如何從開始到結束繪制路線方向？ 現在我的代碼看起來像這樣，它只是在地圖上給了我2個靜態標記

var map = L.mapbox.map('map', 'mapbox.streets', {
    zoomControl: false
}).setView([start.lat, start.lng], 12);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({
    profile: 'mapbox.walking'
});
var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);
L.marker([start.lat, start.lng], {}).addTo(map);
L.marker([finish.lat, finish.lng], {}).addTo(map);

Answer 1

如果我理解正確，您希望使用Mapbox的方向和路由圖層來獲取兩點之間的步行路徑並顯示它。 為此，您需要設置原點和目標點並調用direction的query()函數。 您還需要向地圖添加路徑控件。 修訂后的代碼如下。

// example origin and destination
var start = {lat: 22.3077423, lng: 114.2287582}; 
var finish = {lat: 22.3131334, lng: 114.2205973};

var map = L.mapbox.map('map', 'mapbox.streets', {
    zoomControl: false }).setView([start.lat, start.lng], 14); 

map.attributionControl.setPosition('bottomleft'); 
var directions = L.mapbox.directions({
    profile: 'mapbox.walking' 
});

// Set the origin and destination for the direction and call the routing service
directions.setOrigin(L.latLng(start.lat, start.lng)); 
directions.setDestination(L.latLng(finish.lat, finish.lng));   
directions.query(); 

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map); 
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
    .addTo(map);

您可能不需要自己添加原點/目標標記，因為原點/目標標記將顯示為路線控制的一部分。

Answer 2

你需要一條折線。 Leaflet（Mapbox是Leaflet的擴展版本）類L.Polyline是您所需要的：

參考： http ： //leafletjs.com/reference.html#polyline

碼：

var polyline = new L.Polyline([
    [start.lat, start.lng],
    [finish.lat, finish.lng]
]).addTo(map);

關於Plunker的例子： http ：//plnkr.co/edit/2XSeS1？p = preview