Mapbox:如何将经纬度/lng值输入到输入字段中，并通过鼠标单击在地图上放置标记？
Mapbox:如何将经纬度/lng值输入到输入字段中，并通过鼠标单击在地图上放置标记？
提问于 2020-10-03 01:53:07
我尝试使用以下代码在包含的Mapbox-map上放置一个标记，方法是在地图上单击鼠标，并将该标记中的纬度/经度值写入地图下面的两个输入字段：
<html>
<head>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
<style>
#addmap {
position: abolute;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id='addmap'></div>
<script>
mapboxgl.accessToken = 'PLACEHOLDER_FOR_MAPBOX_TOKEN';
var map = new mapboxgl.Map({
container: 'addmap',
style: 'mapbox://styles/mapbox/streets-v11'
});
function onClick(event){
document.getElementById('lat').value = event.latlng.lat;
document.getElementById('lng').value = event.latlng.lng;
var group = L.featureGroup();
group.id = 'group';
var p_base = L.circleMarker([event.latlng.lat ,event.latlng.lng], {
color: '#fff',
fillColor: '#6a97cb',
fillOpacity: 1,
weight: 1,
radius: 6
}).addTo(group);
map.addLayer(group);
}
</script>
<input id='lat' name='lat' type='text' />
<input id='lng' name='lng' type='text' />
</div>
</body>
</html>不幸的是，在地图上单击时，无论是将标记放在地图上还是将其坐标写入输入字段都不起作用。我哪里做错了？
回答 2
Stack Overflow用户
发布于 2020-10-03 07:09:00
在地图上单击时什么也不会发生，因为您尚未将onClick函数注册为“单击”事件侦听器。
尝试以下操作：
let mapEl = document.getElementById('addmap');
mapEl.addEventListener('click', onClick);然后，当您单击地图元素时，它将触发您的onClick事件侦听器。
Stack Overflow用户
发布于 2021-02-18 16:14:27
map.on('click', function(e) {
//marker.setLngLat(e.lngLat);
var lat = e.lngLat.wrap().lat;
var lng = e.lngLat.wrap().lng;
$("input#latbox").val(lat);
$("input#lngbox").val(lng);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64176190
复制相关文章
相似问题
腾讯云开发者
