GIS教程之如何从 Open Street Map 上的点击事件中获取纬度和经度

在许多 Web 应用程序中,存储地理点很常见。例如,假设我们有一个表单,用户应该在其中输入他的地址并将他的位置放在地图上。

您可以通过几个简单的步骤获得地理点。

在本教程中,我们有一张地图,每当用户单击地图时,都会在该位置添加一个标记,并且地理点会显示在输入中。

首先,我使用 Leaflet.js 创建了一个简单的地图,您可以在下图中看到。如果您不清楚代码,我在之前的一篇文章中进行了解释。

在这里插入图片描述
下一步是添加一个单击事件以观察用户单击地图并在用户单击的位置添加标记:

map.on('click', (event)=> {L.marker([event.latlng.lat , event.latlng.lng]).addTo(map);
})

如果您只想拥有一个标记,则必须首先检查是否有标记并将其删除:

let marker = null;
map.on(‘click’, (event)=> {if(marker !== null){map.removeLayer(marker);}
marker = L.marker([event.latlng.lat , event.latlng.lng]).addTo(map);
})

最后一步是在输入中显示地理点:

document.getElementById(‘latitude’).value = event.latlng.lat;
document.getElementById(‘longitude’).value = event.latlng.lng;

试用以下演示中的代码:

请添加图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部