使用MapBox繪製多個標記之間的路線

我使用MapBox API創建不同的地圖。我有大約25個標記，每個標記都有經度和緯度信息。我可以在地圖上繪製標記。現在我想繪製連接這些標記的道路。有人可以讓我知道如何使用MapBox API來做到這一點。使用MapBox繪製多個標記之間的路線

下面是我用來繪製標記的html代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8 /> 
    <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script> 
    <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' /> 
    <style> 
    body { margin:0; padding:0; } 
    .map { position:absolute; top:0; bottom:0; width:100%; } 
    </style> 
</head> 
<body> 
<style> 
.my-icon { 
    border-radius: 100%; 
    width: 20px; 
    height: 20px; 
    text-align: center; 
    line-height: 20px; 
    color: white; 
} 

.icon-dc { 
    background: #3ca0d3; 
} 

.icon-sf { 
    background: #63b6e5; 
} 

</style> 

<div id='map-two' class='map'> </div> 
<script> 
L.mapbox.accessToken = '<your access token>'; 
var mapTwo = L.mapbox.map('map-two', 'mapbox.light') 
.setView([12.9716,77.5946], 20); 

var myLayer = L.mapbox.featureLayer().addTo(mapTwo); 

var geojson = [ 
    { 
    type: 'Feature', 
    geometry: { 
     type: 'Point', 
     coordinates: [77.5048747113, 13.0408676171] 
    }, 
    properties: { 
     icon: { 
     className: 'my-icon icon-dc', // class name to style 
     html: '&#9733;', // add content inside the marker 
     iconSize: null // size of icon, use null to set the size in CSS 
     } 
    } 
    }, 
    { 
    type: 'Feature', 
    geometry: { 
     type: 'Point', 
     coordinates: [77.5045504332, 13.0386169339] 
    }, 
    properties: { 
     icon: { 
     className: 'my-icon icon-sf', // class name to style 
     html: '&#9733;', // add content inside the marker 
     iconSize: null // size of icon, use null to set the size in CSS 
     } 
    } 
    } 
]; 

myLayer.on('layeradd', function(e) { 
    var marker = e.layer, 
    feature = marker.feature; 
    marker.setIcon(L.divIcon(feature.properties.icon)); 
}); 
myLayer.setGeoJSON(geojson); 

mapTwo.scrollWheelZoom.disable(); 
</script> 
</body> 
</html>

請讓我知道是否有任何其他方式來繪製標記之間的路線。

謝謝。

來源

2016-10-22 Shashank Gupta

我會告訴你一個例子很快 – Manuel

你試過mapbox方向API嗎？ – Manuel

@曼紐爾，如果你能展示一個例子，那將會很棒。 – Minions

你可以用mapbox directions API來做到這一點。通過GET請求你能夠計算兩個點，例如：A和B之間的路由使用jQuery完成的片段可能看起來如下：

$.get('https://api.mapbox.com/directions/v5/mapbox/cycling/' + lngA + ',' + latA + ';' + lngB + ',' + latB + '?access_token=<your-access-token>', 
    function(data) { 

    var coords = polyline.decode(data.routes[0].geometry); // Get the geometry of the request and convert it from a Google string to coordinates 
    var line = L.polyline(coords).addTo(mapTwo); 

    });

關於你的問題，你要每個標記彼此連接！所以，我創建了一個函數來計算路線並從每個標記添加此功能爲雙迴路，擊潰每個標記：

function calculateRoute(geomFrom, geomTo) { 

    var lngFrom = geomFrom.geometry.coordinates[0] 
    var latFrom = geomFrom.geometry.coordinates[1] 

    var lngTo = geomTo.geometry.coordinates[0] 
    var latTo = geomTo.geometry.coordinates[1] 

    $.get('https://api.mapbox.com/directions/v5/mapbox/cycling/' + lngFrom + ',' + latFrom + ';' + lngTo + ',' + latTo + '?access_token=pk.eyJ1IjoicHJheWVyIiwiYSI6ImI3OGRjZjcyY2JiZTUzODMwZWUxZDdiNjRiMWE4NjI5In0.zETX-x6-XPpAv3zt4MiFwg', 
    function(data) { 
    var coords = polyline.decode(data.routes[0].geometry); 

    var line = L.polyline(coords).addTo(mapTwo); 

    }); 
};

這將計算在以GeoJSON每個標記之間的航線。在這裏，您根據您的問題代碼得到了一點點<< FIDDLE >>。我希望這是有用的，我可以幫助你！

來源

2016-10-23 18:33:11 Manuel

使用MapBox繪製多個標記之間的路線

回答

相關問題