Javascript 使多段线捕捉到传单中的道路

我从数据库加载标记，然后在标记之间绘制多段线。我使用多段线来计算总距离，而不必计算从marker-a到marker-b到marker-c的距离等等

但是，我的距离不准确，因为如果两个标记位于弯曲道路周围，则多段线只是将它们连接起来，而不是沿道路绘制

我知道这在谷歌地图API中是可能的，但使用限制不适合我，这就是我决定使用传单的原因

我的标记距离不远，因为我的GPS设备每10秒发送一次位置信息

我找到了插件，我想知道我是否可以使用它使我的多段线捕捉到道路上

以下是我将标记添加到地图的方式：

function getlocationsfromdb(){
      group.clearLayers();
      latlngArray.length=0;
      var deviceid = $("#selectid").val();

        $.ajax({
            type: "POST",
            url: "functionhandlers/getlocations.php",
            data: {deviceid:deviceid,start:start,end:end},
            dataType: 'json',
            cache: false,
        })
        .success(function(response) {   
            $('input').removeClass('error').next('.errormessage').html('');
            if(!response.errors && response.result) {

                $.each(response.result, function( index, value) {
                    var latlng = L.latLng(value[7], value[8]);
                    var marker = L.circleMarker(latlng,{radius:2}).addTo(group);    
                    latlngArray.push(latlng);   

               });
                  var polyline = L.polyline(latlngArray, {color: '#605ca8'}).addTo(group);  
                  map.fitBounds(group.getBounds());
                  var distancetravelled=polyline.measuredDistance();
                  $("#distancetravelled").html(distancetravelled);


            } else {
                $.each(response.errors, function( index, value) {
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                });
            }
        }); 
}

函数getlocationsfromdb（）{ group.clearLayers（）； latlngArray.length=0； var deviceid=$（“#selectid”）.val（）； $.ajax({ 类型：“POST”， url:“functionhandlers/getlocations.php”， 数据：{deviceid:deviceid，开始：开始，结束：结束}， 数据类型：“json”， cache:false， }) .success（函数（响应）{ $（'input'）.removeClass（'error'）.next（'errormessage'）.html（''）； 如果（！response.errors&&response.result）{ $.each（response.result、函数（索引、值）{ var latlng=L.latlng（值[7]，值[8]）； var marker=L.circleMarker（latlng，{radius:2}）.addTo（group）； latlngArray.推（latlng）； }); var polyline=L.polyline（latlngArray，{color:'#605ca8'}）.addTo（组）； map.fitBounds（group.getBounds（））； var DistanceTraveled=多段线。测量的距离（）； $（“#DistanceTraveled”）.html（DistanceTraveled）； }否则{ $.each（response.errors、函数（索引、值）{ //添加错误类 $（'input[name*='+index+']'）。addClass（'error'）。在（''+value+''）之后 }); } }); }

---

有人能给我指一下正确的方向吗？

这可以用传单传送机很容易地完成。初始化路由控制时，您可以将

航路点设置为
latlngArray
：

var control = L.Routing.control({
  waypoints: latlngArray,
  show: false,
  waypointMode: 'snap',
  createMarker: function() {}
}).addTo(map);

control.on('routeselected', function(e) {
  L.polyline(e.route.coordinates).addTo(group);
  map.removeControl(control);
});

在这里，
show:false
阻止控件显示在地图上，空的
createMarker
函数覆盖路由计算机创建的默认标记，而不是什么都不做（虽然当我们移除控件时标记会被移除，但这只会阻止它们在找到路由时在屏幕上闪烁）

您可以通过侦听
routeselected
事件来提取路由计算机结果的所有顶点，该事件将返回一个包含路由的所有方向和几何图形的。将
.route.coordinates
放置在一个新的
L.polyline
对象中，将保留路由，这样我们就可以摆脱路由控制：

var control = L.Routing.control({
  waypoints: latlngArray,
  show: false,
  waypointMode: 'snap',
  createMarker: function() {}
}).addTo(map);

control.on('routeselected', function(e) {
  L.polyline(e.route.coordinates).addTo(group);
  map.removeControl(control);
});

在填充
Latlngaray
后，立即将上述代码块放置在
回调函数中。success
将为您提供所需的路径。这里有一把小提琴展示了这一点：


此外，如果您没有对任何其他内容使用路由控件，并且希望不让它完全显示（在计算路由时，可能仍会出现一个白色的小控件框），则可以简单地将其隐藏在CSS中：

.leaflet-routing-container {
  display:none;
}

我意识到这个解决方案有点迂回，因为它创建了一个控件，然后一半的代码只是阻止该控件显示在地图上

实际上，您不必将其添加到地图中。此外，您还可以直接攻击内部路由器的
路由
功能

var routingControl = L.Routing.control({
  waypointMode: 'snap'
});

然后

小心，这是原始复制/粘贴：
-航路点符合内部格式（检查）
-latLngCoordinates必须采用{lat:，lng:}格式
-它可能需要一些清理，因为生成的url封装了一些很长的“提示”数据。
我意识到这个解决方案有点迂回，因为它创建了一个控件，然后一半的代码只是阻止该控件显示在地图上。虽然我怀疑有一种方法可以不用创建控件（可能是直接使用）来实现这一点，但我无法从文档中完全理解它。这太棒了！谢谢你花时间向我详细解释，非常感谢内森！）小提琴坏了：(