gpt4 book ai didi

javascript - LeafletJS : How to use L. leafletjs 中的 Routing.itinerary 和路线上的悬停事件?

转载 作者:数据小太阳 更新时间:2023-10-29 03:56:14 25 4
gpt4 key购买 nike

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);
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/>


<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.js"></script>

<style>
body { margin:0; padding:0; }
#mapid { height:220px;}
.leaflet-routing-container{
display: none;
}
</style>

<body>
<div id="mapid"></div>
</body>

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

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

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

enter image description here

请多多指教..非常感谢

最佳答案

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

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

祝你好运!

关于javascript - LeafletJS : How to use L. leafletjs 中的 Routing.itinerary 和路线上的悬停事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44235802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com