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

マップボックス方向APIを試しましたか？ – Manuel

@Manuel、例を示すことができれば素晴らしいと思います。 – Minions

mapbox directions APIでこれを行うことができます。

$.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); 

    });

あなたの質問にについてあなたがお互いにそれぞれのマーカーを接続したい：GETリクエストを経由して、あなたはjQueryを使って行われるスニペットは、次のようになります。2点例えば、AとBの間のルートを計算することができます！

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を使用して複数のマーカー間のルートをプロットする

答えて

関連する問題