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를 함께 할 코드 조각은 다음과 같이 수있는 두 지점의 예를 들어 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를 사용하여 여러 마커 사이의 경로를 그립니다.

답변

관련 문제