您好,我正在尝试使用传单添加自定义标记并使用 Routing.control 绘制路线。我需要向标记添加一个变量,因为我需要不时更新其中一个标记位置。我只会有 3 个标记或航路点,一个起点,第二个和第三个。我可能只需要移动开始标记。
绘制路线并添加默认标记的添加路线的代码是
var route = L.Routing.control({
waypoints: [
L.latLng(my_lat, my_lng),
L.latLng(job_p_lat, job_p_lng),
L.latLng(job_d_lat, job_d_lng)
],show: false, units: 'imperial',
router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);
我已经尝试了 q 一些不值得展示的事情,因为什么都没做。任何建议都很好,谢谢
最佳答案
如果你看这个issue你会看到你关于不同标记图标的问题已经得到解答。
L.Routing.control
的createMarker
选项函数可以像这样使用:
// source: https://github.com/pointhi/leaflet-color-markers
var greenIcon = new L.Icon({
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94), // startmarker
L.latLng(57.6792, 11.949) // endmarker
],
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps - 1) {
// here change the starting and ending icons
return L.marker(wp.latLng, {
icon: greenIcon // here pass the custom marker icon instance
});
} else {
// here change all the others
return L.marker(wp.latLng, {
icon: yourOtherCustomIconInstance
});
}
}
}).addTo(map);
Demo - 在隐身窗口中打开它,因为 API 有请求限制。
你应该看到这样的东西:
更新:要动态更改路线,您必须这样做:
将您的路由控制实例存储到一个变量:var control = L.Routing.control({...})
然后像这样改变标记位置:
// this is the starting marker latitude
control.getRouter().options.waypoints[0].lat = L.latLng(59.74, 11.94);
// similarly for longitude and for ending marker to change the position dynamically
然后刷新路由图:
control.route();
关于javascript - 路由控件名称和添加自定义标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53963285/