[英]Unable to drag marker after search, leaflet map
搜索地址并在该位置设置标记后,我无法拖动标记。
<script>
var lngg, latt,hlat,hlng;
var marker;
var map = L.map('map').setView([19.8684798, 75.3218784], 10);
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
marker = L.marker([19.8684798, 75.3218784]).addTo(map)
.bindPopup('My location')
.openPopup();
map.locate({setView : true});
marker.dragging.enable();
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function theLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x = document.getElementById('notice');
x.innerHTML = "Geolocation is not supported by this browser.";
}
} theLocation();
function showPosition(position) {
latt = position.coords.latitude;
lngg = position.coords.longitude;
document.getElementById('demo').innerHTML = "Latitude: " + latt +
"<br>Longitude: " + lngg;
marker.setLatLng([position.coords.latitude, position.coords.longitude]);
}
function setLocation(){
position = marker.getLatLng();
hlat = position.lat;
hlng = position.lng;
document.getElementById('lat').value = hlat;
document.getElementById('lng').value = hlng;
alert('Location is Set.');
}
function onMapClick(e) {
marker.on("dragend", function(ev) {
var chagedPos = ev.target.getLatLng();
this.bindPopup("ME at " +chagedPos.toString()).openPopup();
loc1 = [chagedPos.lat,chagedPos.lng];
hlat = chagedPos.lat;
hlng = chagedPos.lng;
document.getElementById('lat').value = hlat;
document.getElementById('lng').value = hlng;
document.getElementById('demo').innerHTML = "Latitude: " + hlat +
"<br>Longitude: " + hlng;
console.log(loc1);
});
}
map.on('click', onMapClick);
var search = new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon'],
marker: L.marker([0,0]),
autoCollapse: true,
autoType: false,
textPlaceholder: ' search the location... ',
minLength: 2
});
search.on('search:locationfound',
function(e) {
marker.setLatLng([e.latlng.lat, e.latlng.lng]);
latt = e.latlng.lat;
lngg = e.latlng.lng;
document.getElementById('demo').innerHTML = "Latitude: " + latt + "<br>Longitude: " + lngg;
});
map.addControl(search);
</script>
我还尝试再次启用拖动即marker.dragging.enable();
在 ** search.on() ** 通过 ** setLatLng() ** 设置标记位置后,但仍然无法正常工作。
当我搜索地址时,标记位置设置为该位置,但随后我无法拖动该标记。
当我搜索地址时,标记位置设置为该位置,但随后我无法拖动该标记。
在这种情况下,实际上在同一位置有 2 个标记。 一个由库创建(不可拖动),另一个是您的(可拖动),第一个标记完全覆盖您的标记。 您只需要通过替换来禁用第一个标记
marker: L.marker([0,0]),
和
marker: false,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.