LeafletJS:如何在leafletjs中使用L.Routing.itinerary并在路线上悬停事件?

时间:2017-05-29 06:21:09

标签: javascript jquery leaflet



static void WriteAllText(string path, string txt) {
    var bytes = Encoding.UTF8.GetBytes(txt);
    using (var f = File.Open(path, FileMode.Create)) {
        f.Write(bytes, 0, bytes.Length);
    }
}

var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
        L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxN25pNjMwMDFxMndvNzZhb2xqZmxxIn0._RFHs1Tj81KAk7u-5CJ6bA', {
            attribution: 'My Office',
            maxZoom: 18,
            id: 'mapbox',
            accessToken: 'pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'
        }).addTo(mymap);
        
        var carIconStart = L.icon({
        iconUrl: 'img/car-onmap.png',
        iconSize:     [40, 40], // size of the icon
        popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
    });
        
        var carIconEnd = L.icon({
        iconUrl: 'img/car-onmap.png',
        iconSize:     [40, 40], // size of the icon
        popupAnchor:  [0, -20] // point from which the popup should open relative to the iconAnchor
    });
        

        L.marker([1.29828408457,103.789110693]).addTo(mymap).bindPopup("Start from Office");
 L.marker([1.41887924373,103.847815159]).addTo(mymap).bindPopup("End in MyHome");
            
        var control = L.Routing.control({
            waypoints: [
                L.latLng(1.29828408457,103.789110693),
                L.latLng(1.41887924373,103.847815159)
            ],
            lineOptions:{
                styles: [{color: 'lightgreen', opacity: 1, weight: 5}],
                addWaypoints:false
            },
            draggableWaypoints: false,
            createMarker: function(){ return false; },
            router: L.Routing.mapbox('pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'),
            
            }).addTo(mymap);
        
        L.Routing.itinerary({pointMarkerStyle: {radius: 5,color: '#03f',fillColor: 'white',opacity: 1,fillOpacity: 0.7}});
        L.Routing.errorControl(control).addTo(mymap);




我想在航点的路线上添加悬停事件

在传单的文档中,添加悬停事件可以使用L.Routing.itinerary。

http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions

enter image description here

请指教我.. 非常感谢你

1 个答案:

答案 0 :(得分:2)

您可以查看Leaflet Label Plugin。 安装Leaflet标签插件。

网址:https://github.com/Leaflet/Leaflet.label

祝你好运!!