使用MapBox绘制多个标记之间的路径

Question

I'm using MapBox API to create different maps. 我正在使用MapBox API创建不同的地图。 I have around 25 markers with latitude and longitude information for each marker. 我有大约25个标记，每个标记有纬度和经度信息。 I'm able to plot the markers on the map. 我可以在地图上绘制标记。 Now I want to draw the road connecting these markers. 现在我想绘制连接这些标记的道路。 Can someone let me know how to do this using MapBox API. 有人可以使用MapBox API让我知道如何做到这一点。

Below is the html code that I am using to plot the markers. 下面是我用来绘制标记的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>

Please let me know if there is any other way to plot the route between the markers. 如果有任何其他方式绘制标记之间的路线，请告诉我。

Thanks. 谢谢。

Answer 1

You can do this with the mapbox directions API . 您可以使用mapbox说明API执行此操作。 Via a GET request you are able to calculate a route between two points eg A and B. The snippet done with jQuery could look like the following: 通过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);

  });

Regarding to your question you want to connect each marker with each other! 关于你的问题，你想要将每个标记相互连接！ So I have created a function to calculate the route and add this function into a double loop, to rout from each marker to each marker: 所以我创建了一个计算路径的函数，并将此函数添加到双循环中，从每个标记到每个标记的路径：

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

  });  
};

This calculates the route between each markers in a geoJSON. 这将计算geoJSON中每个标记之间的路径。 Here you got a little << FIDDLE >> , based on your questions code. 根据您的问题代码，您可以在这里获得一些“FIDDLE” 。 I hope this was usefull and I could help you ! 我希望这很有用，我可以帮助你！

使用MapBox绘制多个标记之间的路径

问题描述

1 个解决方案

解决方案1
0 2016-10-23 18:33:11

使用MapBox绘制多个标记之间的路径

问题描述

1 个解决方案

解决方案1 0 2016-10-23 18:33:11

解决方案1
0 2016-10-23 18:33:11