Javascript 如何让Mapbox在点之间布线而不是绘制直线？

我正在使用Mapbox在地图上的点之间绘制多段线，但是这条线很乱，它没有按照地图路线打印。有人能帮我吗？或者请建议一些替代方案

 var myMap = L.mapbox.map('map')
.setView([34.2445899, -119.1842238], 13)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var markers = new L.MarkerClusterGroup();
var refreshRealTime;
var featureLayer = L.mapbox.featureLayer().addTo(myMap); 

 

request.onreadystatechange = function () {
      if (this.readyState === 4) {
        let body = JSON.parse(this.responseText);
        let coords_line = [];
        let stopArr = [];
        for(let i=0; i<body.length; i++){
            let data = body[i];
            let stop =  data.stop;
            
            if(!stopArr.includes(stop.name)){
                coords_line.push([stop.lat, stop.lon ]);
                let marker = L.marker(new L.LatLng(stop.lat, stop.lon), {
                    icon: L.mapbox.marker.icon({'marker-symbol': 'bus', 'marker-color': '0044FF', 'description':'<div><p><b>Cpanacity: </b></div>'}),
                    title: stop.name
                });
                marker.bindPopup(stop.name);
                markers.addLayer(marker);
                stopArr.push(stop.name);
            }
        
        }
        myMap.addLayer(markers);
        if(coords_line.length > 0){
            myMap.setView(coords_line[0], 13);
            setTimeout(function(){ 
                let routeId= $("#route").val();
                let routecolor = routeObj[routeId].color;
                
                polyline = L.polyline(coords_line, {color: routecolor}).addTo(myMap);
                
                
             }, 1000);
        }
      }
    };

var myMap=L.mapbox.map（'map'））
.setView（[34.2445899，-119.1842238]，13）
.addLayer（L.mapbox.styleLayer（'mapbox://styles/mapbox/streets-v11'));
var markers=新的L.MarkerClusterGroup（）；
实时性；
var featureLayer=L.mapbox.featureLayer（）.addTo（myMap）；
request.onreadystatechange=函数（）{
if（this.readyState==4）{
让body=JSON.parse（this.responseText）；
让coords_line=[]；
设stopArr=[]；
for（设i=0；i=0）{
设置视图（coords_线[0]，13）；
setTimeout（函数（）{
设routeId=$（“#route”）.val（）；
让routecolor=routeObj[routeId].color；
polyline=L.polyline（坐标线，{color:routecolor}）.addTo（myMap）；
}, 1000);
}
}
};

调试之后，我找到了解决方案，首先我们需要根据给定的点调用direction API

 $.get('https://api.mapbox.com/matching/v5/mapbox/driving/' + qry + '?geometries=geojson&steps=true&access_token='+token, 
        function( data ) {
        // var coords = polyline.decode(data.routes[0].geometry);
        var coords = data.matchings[0].geometry.coordinates;
        let coords_line = [];
        for(let i=0; i<coords.length; i++){
            coords_line.push([coords[i][1],coords[i][0]]);
        }
        polyline = L.polyline(coords_line, {color: '<?= $color ?>'}).addTo(myMap)

$.get（'https://api.mapbox.com/matching/v5/mapbox/driving/“+qry+”？几何图形=geojson&steps=true&access_-token='+token，
功能（数据）{
//var coords=polyline.decode（data.routes[0].geometry）；
var coords=data.matchings[0].geometry.coordinates；
让coords_line=[]；
对于（让i=0；这里没有足够的细节来帮助您解决混乱的线条问题。您好@Wyck您需要什么细节？您是否正在尝试使用？@isherwood我没有使用任何方向API，我只是希望它应该像谷歌地图一样工作
    var myMap = L.mapbox.map('map')
.setView([34.2445899, -119.1842238], 13)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var markers = new L.MarkerClusterGroup();
var refreshRealTime;
var featureLayer = L.mapbox.featureLayer().addTo(myMap); 

 

request.onreadystatechange = function () {
      if (this.readyState === 4) {
        let body = JSON.parse(this.responseText);
        let coords_line = [];
        let stopArr = [];
        let qry = [];
        for(let i=0; i<body.length; i++){
            let data = body[i];
            let stop =  data.stop;
            
            if(!stopArr.includes(stop.name)){
                coords_line.push([stop.lat, stop.lon ]);
                qry.push(stop.lon+','+stop.lat);
                let marker = L.marker(new L.LatLng(stop.lat, stop.lon), {
                    icon: L.mapbox.marker.icon({'marker-symbol': 'bus', 'marker-color': '0044FF', 'description':'<div><p><b>Cpanacity: </b></div>'}),
                    title: stop.name
                });
                marker.bindPopup(stop.name);
                markers.addLayer(marker);
                stopArr.push(stop.name);
            }
        
        }
        myMap.addLayer(markers);
        if(coords_line.length > 0){
            myMap.setView(coords_line[0], 13);
            setTimeout(function(){ 
                let routeId= $("#route").val();
                let routecolor = routeObj[routeId].color;
                
                calculateRoute(qry.join(";"));
                
                
             }, 1000);
        }
      }
    };

    function calculateRoute(qry) {
          $.get('https://api.mapbox.com/matching/v5/mapbox/driving/' + qry + '?geometries=geojson&steps=true&access_token='+token, 
            function( data ) {
            // var coords = polyline.decode(data.routes[0].geometry);
            var coords = data.matchings[0].geometry.coordinates;
            let coords_line = [];
            for(let i=0; i<coords.length; i++){
                coords_line.push([coords[i][1],coords[i][0]]);
            }
            polyline = L.polyline(coords_line, {color: '<?= $color ?>'}).addTo(myMap)
                // addRoute(coords);
            // var line = L.polyline(coords).addTo(myMap);

          });  
        }