Geek Answers Handbook

Casting a polyline to roads in a leaflet

I load markers from the database and then draw a polyline between the markers. I use a polyline to calculate the total distance instead of calculating the distance from marker-a to marker-b to marker-c, etc.

My distance, however, is inaccurate, because if there are two curves around a curved road, the polyline simply connects them, and does not draw along the road.

I know that this is possible in the Google Maps API, but the restrictions on use do not suit me, so I decided to use the booklet.

My tokens are not so far apart because my GPS device sends a location every 10 seconds.

I found the leaflet-routing-machine plugin and I was wondering if I can use this to make my polyline road-bound?

This is how I add markers to my map:

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>')
                });
            }
        }); 
}

Can anyone point me in the right direction?

+4
source share
2 answers

This can be done quite easily with the help of routing leaflets. You can simply set waypointsin latlngArraywhen initializing the routing control:

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

show: false , createMarker , , ( , , ).

, routeselected, IRoute . .route.coordinates L.polyline , :

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

.success latlngArray . , :

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

, - , ( ), css

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

, , , ,

. , route.

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


routingControl._router.route(latLngCoordinates, function(err, waypoints) {
  var a = waypoints;
});

, /: - ( ) - latLng {lat:, lng:} - , url "".

+1

More articles:


All Articles