使用mapbox API进行Mapbox路由

2 回答

• 3

  Mapbox api中没有可用于 生产环境 的路由 . 他们正在预览中看到这里：https://www.mapbox.com/developers/api/directions/

  mapbox的团队成员之一确实提出了另一种选择 . 看这里：https://stackoverflow.com/a/16305757/475882

  回复于 2024-04-26T04:04:57+08:00
• 3

  我使用Mapbox.directions插件来执行此操作 . 我使用map contextmenu事件在某个位置获取右键单击事件（我的标记有可点击：false，因此 Map 会点击鼠标） . 我使用MouseEvent数据来获取latlng，并将其设置为路径的起点或终点 . 我允许插件查询路径并使用控件在 Map 上显示路线，说明和突出显示的路径 . 以下是一些片段：

  $('#lblStatus').html("Calculating route....");
  
  // **** units is not working yet in the current Mapbox release
  moDirections = L.mapbox.directions({
      profile: 'mapbox.driving',
      units: 'metric'
  });
  
  moDirections.on('load', function (directions) {
      // Loop through all route coordinates and determine bounds for route.
      var minLat = 90, minLng = 180, maxLat = -90, maxLng = -180;
      var lat, lng;
      directions.routes[0].geometry.coordinates.forEach(function (laCoordinate, index) {
          lat = laCoordinate[1];
          lng = laCoordinate[0];
          if (lat < minLat) {
              minLat = lat;
          }
          if (lng < minLng) {
              minLng = lng;
          }
          if (lat > maxLat) {
              maxLat = lat;
          }
          if (lng > maxLng) {
              maxLng = lng;
          }
      });
      var loBounds = L.latLngBounds(L.latLng(minLat, minLng), L.latLng(maxLat, maxLng));
      moMap.fitBounds(loBounds);
  
      $('#lblStatus').html("");
  });
  
  moDirections.setOrigin(loStart);
  moDirections.setDestination(loEnd);
  moDirections.query();
  
  moDirectionsLayer = L.mapbox.directions.layer(moDirections).addTo(moMap);
  moDirectionsErrorsControl = L.mapbox.directions.errorsControl('pnlRouteErrors', moDirections);
  moDirectionsRoutesControl = L.mapbox.directions.routesControl('pnlAlternateRoutes', moDirections);
  moDirectionsInstructionsControl = L.mapbox.directions.instructionsControl('pnlRouteInstructions', moDirections);
  

  上面的pnl *元素是注入控件的div .

  目前基本上没有方向插件的文档 . 你可以在这里获得开源代码：https://github.com/mapbox/mapbox-directions.js

  唯一的例子是：https://www.mapbox.com/mapbox.js/example/v1.0.0/mapbox-directions/但我发现输入控件不能正常工作并且不适合我的设计 .

  回复于 2024-04-26T04:04:57+08:00