使用 mapbox API 的 Mapbox 路由答案

【问题标题】：Mapbox Routing using mapbox API使用 mapbox API 的 Mapbox 路由
【发布时间】：2023-04-02 16:50:02
【问题描述】：

我不太擅长编码，目前使用 mapbox API 来创建带有点的地图。但是我在使用“地理定位”的用户位置和我的地图上的点之间的基本路由选项上找不到任何东西。有没有办法在 API 中做到这一点？我想为用户创建一个选项，让他们可以找到我目前在地图上的位置以及这些位置之间的路径。非常感谢您的帮助。

问候

阿尔

【问题讨论】：

欢迎来到 Stack Overflow！您能说出您使用的是哪种语言吗？

标签： mapbox

【解决方案1】：

在生产就绪的 Mapbox api 中没有可用的路由。他们正在进行预览，请参见此处：https://www.mapbox.com/developers/api/directions/

mapbox 的一位团队成员确实提出了替代方案。见这里：https://stackoverflow.com/a/16305757/475882

【讨论】：

【解决方案2】：

我使用 Mapbox.directions 插件来执行此操作。我使用地图上下文菜单事件在某个位置获得右键单击事件（我的标记有 clickable: false 所以地图获得鼠标点击）。我使用 MouseEvent 数据来获取 latlng，并将其设置为路线的起点或终点。我允许插件查询路线并使用控件在地图上显示路线、说明和突出显示的路径。以下是一些sn-ps：

$('#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/，但我发现 Input 控件不能很好地工作并且不适合我的设计。

【讨论】：