如何将默认标记替换为航点中的自定义图标(传单路由)
How to replace default marker to custom icon in waypoint (Leaflet Routing)
在这里,我正在绘制路线并使用 Leaflet Routing Machine 为路线分配站点 Leaflet Routing Machine
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [array object of stops],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]
}
})).addTo(map);
在 waypoints 对象数组中,我绑定了自定义标记,例如:
L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);
但我得到了 2 个标记,第一个是默认图标,第二个是我的自定义图标。您可以在我的屏幕截图中看到一个是默认图标(蓝色标记)和自定义图标(停止图像)
所以我想用我的自定义替换默认(蓝色标记)并删除默认标记。谢谢
终于找到了解决办法。
已添加 属性
createMarker: function() { return null; },
您可以使用此代码:
L.Routing.control({
waypoints: [
L.latLng(36.3603179, 59.5041424),
L.latLng(36.3279067, 59.5248145)
],
routeWhileDragging: true,
lineOptions: {
styles: [{ color: 'green', opacity: 1, weight: 5 }]
},
createMarker: function (i: number, waypoint: any, n: number) {
const marker = L.marker(waypoint.latLng, {
draggable: true,
bounceOnAdd: false,
bounceOnAddOptions: {
duration: 1000,
height: 800,
function() {
(bindPopup(myPopup).openOn(map))
}
},
icon: L.icon({
iconUrl: './assets/global/img/mapmarker-red.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: './assets/global/img/marker-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
})
});
return marker;
}
}).addTo(map);
在这里,我正在绘制路线并使用 Leaflet Routing Machine 为路线分配站点 Leaflet Routing Machine
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [array object of stops],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]
}
})).addTo(map);
在 waypoints 对象数组中,我绑定了自定义标记,例如:
L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);
但我得到了 2 个标记,第一个是默认图标,第二个是我的自定义图标。您可以在我的屏幕截图中看到一个是默认图标(蓝色标记)和自定义图标(停止图像)
所以我想用我的自定义替换默认(蓝色标记)并删除默认标记。谢谢
终于找到了解决办法。 已添加 属性
createMarker: function() { return null; },
您可以使用此代码:
L.Routing.control({
waypoints: [
L.latLng(36.3603179, 59.5041424),
L.latLng(36.3279067, 59.5248145)
],
routeWhileDragging: true,
lineOptions: {
styles: [{ color: 'green', opacity: 1, weight: 5 }]
},
createMarker: function (i: number, waypoint: any, n: number) {
const marker = L.marker(waypoint.latLng, {
draggable: true,
bounceOnAdd: false,
bounceOnAddOptions: {
duration: 1000,
height: 800,
function() {
(bindPopup(myPopup).openOn(map))
}
},
icon: L.icon({
iconUrl: './assets/global/img/mapmarker-red.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: './assets/global/img/marker-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
})
});
return marker;
}
}).addTo(map);