我有一个带有标记的传单Map和一个文本字段显示其坐标的表单。标记可以移动或拖动更新相应的表单字段。
使用Leaflet.GeoSearch,当搜索完成时(点击自动完成选项),一个标记的新示例被创建,我想要做的是更新现有标记的位置和相应的纬度/经度字段(而不是创建一个新标记)。根据this post,一个自定义标记可以通过marker: myCustomMarker
选项指定,但是它在我的代码中似乎不起作用。
先谢了
下面是代码:
var tileLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> Contributors'
});
var latlng = L.latLng(50.5, 30.5);
var map = new L.Map('map', {
'center': latlng,
'zoom': 12,
'layers': [tileLayer]
});
var marker = L.marker(latlng,{
draggable: true,
autoPan: true
}).addTo(map);
marker.on('dragend', function (e) {
updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});
map.on('click', function (e) {
marker.setLatLng(e.latlng);
updateLatLng(marker.getLatLng().lat, marker.getLatLng().lng);
});
function updateLatLng(lat,lng) {
document.getElementById('latitude').value = marker.getLatLng().lat;
document.getElementById('longitude').value = marker.getLatLng().lng;
}
const searchControl = new GeoSearch.GeoSearchControl({
style: 'bar',
provider: new GeoSearch.OpenStreetMapProvider ({
showMarker: true,
marker: marker, // use custom marker, not working?
}),
});
map.addControl(searchControl);
2条答案
按热度按时间rqqzpn5f1#
我快速浏览了一下它们的源代码,该属性只用于提取其值,它实际上不会使用传入的示例,因此永远不会像您预期的那样使用。
您的代码还有另一个问题。它是:
但它应该是:
最后,为了解决您的问题,您可以改为侦听GeoSearch事件,更准确地说,是从结果列表中选择location时触发的
showlocation
事件,以清除先前的标记,因为该包将始终添加自己的标记(如果启用)。也就是说,在文件中添加以下代码应该可以解决这个问题。
根据您的评论更新
如果你想在使用
GeoSearch
库时保留初始标记属性,你必须自己应用它。Demo
lnxxn5zx2#