javascript – 使折线与传单中的道路对齐

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

然而,我的距离是不准确的,因为如果两个标记围绕弯曲的道路,折线只是连接它们而不是沿着道路绘制.

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

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

我找到了leaflet-routing-machine 插件,我想知道我是否可以使用它来让我的折线卡在路上？

这就是我在地图中添加标记的方法：

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,value) {
                    // add error classes
                    $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>')
                });
            }
        }); 
}

有人可以指点我正确的方向吗？

解决方法

这可以通过传单路由机相当容易地完成.初始化路径控制时,您可以将路径设置为latlngArray：

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

这里,show：false使控件不在地图上显示,而空的createMarker函数会覆盖路由计算机创建的默认标记,而不执行任何操作(尽管删除控件时标记将被删除,这样可以防止它们闪烁在找到路线的屏幕上).

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

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

在填充latlngArray之后立即将上述代码块放在.success回调函数中应该为您提供所需的路径.这是一个显示这个工作的小提琴：

http://fiddle.jshell.net/nathansnider/ygktexbj/

此外,如果您没有将路由控制用于其他任何事情并且希望防止它完全显示(在计算路径时仍可能出现一个小的白色控制框),您可以简单地将其隐藏在CSS中：

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

javascript – 使折线与传单中的道路对齐

解决方法

猜你在找的JavaScript相关文章