Javascript 使用MapBox在多个标记之间绘制路线_Javascript_Routing_Leaflet_Mapbox

Javascript 使用MapBox在多个标记之间绘制路线

javascript routing leaflet mapbox

Javascript 使用MapBox在多个标记之间绘制路线,javascript,routing,leaflet,mapbox,Javascript,Routing,Leaflet,Mapbox,我正在使用MapBox API创建不同的地图。我有大约25个标记，每个标记都有纬度和经度信息。我能在地图上画出标记。现在我想画一条连接这些标记的道路。有人能告诉我如何使用MapBox API来实现这一点吗下面是我用来绘制标记的html代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script src='https://api.mapbox.com/mapbox.js

我正在使用MapBox API创建不同的地图。我有大约25个标记，每个标记都有纬度和经度信息。我能在地图上画出标记。现在我想画一条连接这些标记的道路。有人能告诉我如何使用MapBox API来实现这一点吗

下面是我用来绘制标记的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>


正文{margin:0；padding:0；}
.map{位置：绝对；顶部：0；底部：0；宽度：100%；}
.我的偶像{
边界半径：100%；
宽度：20px；
高度：20px；
文本对齐：居中；
线高：20px；
颜色：白色；
}
.icon dc{
背景#3ca0d3；
}
.图标sf{
背景#63b6e5；
}
L.mapbox.accessToken=''；
var mapboo=L.mapbox.map（'map-two'，'mapbox.light'））
.setView（[12.9716,77.5946]，20）；
var myLayer=L.mapbox.featureLayer（）.addTo（maptoo）；
var geojson=[
{
键入：“功能”，
几何图形：{
键入：“点”，
座标：[77.5048747113.0408676171]
},
特性：{
图标：{
className:'我的图标dc'，//要设置样式的类名
html:“★；”，//在标记内添加内容
iconSize:null//图标大小，使用null设置CSS中的大小
}
}
},
{
键入：“功能”，
几何图形：{
键入：“点”，
座标：[77.5045504332，13.0386169339]
},
特性：{
图标：{
className:'我的图标sf'，//要设置样式的类名
html:“★；”，//在标记内添加内容
iconSize:null//图标大小，使用null设置CSS中的大小
}
}
}
];
myLayer.on（'layeradd'，函数（e）{
var标记=e.layer，
feature=marker.feature；
marker.setIcon（L.divIcon（feature.properties.icon））；
});
setGeoJSON（geojson）；
scrollWheelZoom.disable（）；

请让我知道是否有其他方法来绘制标记之间的路线

<!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>

谢谢。

您可以使用。通过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);

  });

这将计算geoJSON中每个标记之间的路由。根据你的问题代码，这里有一点。我希望这是有用的，我可以帮助你

如果您尝试过mapbox方向API，我会给您展示一个示例？@Manuel，如果您能展示一个示例，那就太好了。好的，我会的！今天还是明天morning@Manuel，谢谢你的关注。期待您的来信。