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