javascript - 搜索后无法拖动标记,传单地图
问题描述
搜索地址并在该位置设置标记后,我无法拖动标记。
<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();
在通过 ** setLatLng() ** 设置标记位置后,我还尝试在 ** search.on() ** 中再次启用拖动 ie ,但它仍然无法正常工作。
当我搜索地址时,标记位置设置到该位置,但是我无法拖动该标记。
解决方案
当我搜索地址时,标记位置设置到该位置,但是我无法拖动该标记。
在这种情况下,实际上在同一位置有 2 个标记。一个由库创建(不可拖动),另一个是您的(可拖动),第一个标记完全覆盖您的标记。您只需要通过替换禁用第一个标记
marker: L.marker([0,0]),
和
marker: false,
推荐阅读
- vba - VBA代码来计算行数(在过滤数据中)&对过滤源文件中的相关列求和
- c# - 对经度和纬度使用 GeoLocator 在 Xamarin 表单中给出以下错误
- amazon-web-services - 如何仅允许 IP/范围访问 AWS API Gateway 资源
- php - 使用 symfony 4 从 twig 中的 collectionType 表单中渲染一个字段
- .net - 正则表达式 - 我如何只保留字符串 ABC_ABC12345_ABC_ABC.txt 中的 ABC12345,有时它可以是 ABC12345_ABC.txt
- python - 如何访问环境中的模块?
- r - 如何在闪亮的 ggplot2 中的 geom_line 和 geom_bar 可视化之间切换 - R
- scala - Scala - 如何获取和打印 Either 的内容?
- c# - 如何从代码隐藏 C# 中获取重复的 ID ASP 元素
- vbscript - 无论文件类型如何,如何关闭任何打开的文件