mapbox点击获取经纬度

六月初六月初 地图开发 2022-08-22 15:15:44

点击地图任意地方获取该点的经纬度，在开发中尝被用于地图找点的应用。

那么关于该功能，在mapbox中我们要如何实现点击找点功能呢？

效果如图：


代码详情：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>显示卫星地图</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2l4YmxvZyIsImEiOiJjbDYxdjNxbTcwMzZ3M2ZwNzkzOWJqNTI5In0.o6rf1thO5EbTqa5gXOJKYA';
	var map = new mapboxgl.Map({
		container: 'map',
		zoom: 4.5,
		center: [105.000, 38.000],
		style: 'mapbox://styles/mapbox/satellite-streets-v11'
	});
	map.on('click', (e) => {
		alert(e.lngLat.lat+"——"+e.lngLat.lng)
	})
</script>
</body>
</html>

代码说明：

通过对mapbox点击进行监听，在默认的数据中就会返回关于地图的相关信息，这其中就包含了经纬度。


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！