javascript Leaflet geosearch -将结果标记绑定到现有标记

mrphzbgm  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(178)

我有一个带有标记的传单Map和一个文本字段显示其坐标的表单。标记可以移动或拖动更新相应的表单字段。
使用Leaflet.GeoSearch,当搜索完成时(点击自动完成选项),一个标记的新示例被创建,我想要做的是更新现有标记的位置和相应的纬度/经度字段(而不是创建一个新标记)。根据this post,一个自定义标记可以通过marker: myCustomMarker选项指定,但是它在我的代码中似乎不起作用。
先谢了
下面是代码:

var tileLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <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);

JSF中间:
https://jsfiddle.net/rtjLm6uq/

rqqzpn5f

rqqzpn5f1#

我快速浏览了一下它们的源代码,该属性只用于提取其值,它实际上不会使用传入的示例,因此永远不会像您预期的那样使用。
您的代码还有另一个问题。它是:

const searchControl  = new GeoSearch.GeoSearchControl({
  style: 'bar',
  provider: new GeoSearch.OpenStreetMapProvider ({
  showMarker: true,
  marker: marker, // use custom marker, not working?
}),
});

但它应该是:

const searchControl  = new GeoSearch.GeoSearchControl({
  style: 'bar',
  provider: new GeoSearch.OpenStreetMapProvider (),
  showMarker: true,
  marker: marker, // use custom marker, not working?
});

最后,为了解决您的问题,您可以改为侦听GeoSearch事件,更准确地说,是从结果列表中选择location时触发的showlocation事件,以清除先前的标记,因为该包将始终添加自己的标记(如果启用)。
也就是说,在文件中添加以下代码应该可以解决这个问题。

map.on('geosearch/showlocation', () => {
  if (marker) {
    map.removeControl(marker);
  }
});

根据您的评论更新

如果你想在使用GeoSearch库时保留初始标记属性,你必须自己应用它。

map.on('geosearch/showlocation', () => {
  if (marker) {
    map.removeControl(marker);
  }
  // The marker class extends the layer class,
  // so you can search for it among the layers
  map.eachLayer(item => {
    if (item instanceof L.Marker) {
      // Once you found it, set the properties
      item.options.draggable = true;
      item.options.autoPan = true;
      // Then enable the dragging. Without this, it wont work
      item.dragging.enable();
    }
  });
});

Demo

lnxxn5zx

lnxxn5zx2#

var tileLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <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 MyCustomMarker = L.Icon.extend({
  options: {
    shadowUrl: null,
    iconAnchor: new L.Point(12, 12),
    iconSize: new L.Point(24, 24),
    iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/6/6b/Information_icon4_orange.svg'
  }
});
const searchControl  = new GeoSearch.GeoSearchControl({
  style: 'bar',
  provider: new GeoSearch.OpenStreetMapProvider (),
  showMarker: true,
  marker: {
        icon: new MyCustomMarker(),
        draggable: false,
      }
});

});
map.addControl(searchControl);

相关问题