基于mapbox-gl 开发类似于高德地图的经纬度拾取器

最新推荐文章于 2025-11-14 09:58:45 发布

原创

最新推荐文章于 2025-11-14 09:58:45 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html

该博客详细介绍了如何使用Mapbox GL JS库创建一个地图应用，包括设置地图样式、添加鼠标坐标显示、实现坐标拾取及复制功能，并结合geocoder插件进行位置搜索。此外，还展示了如何处理地图上的点击事件，以及添加自定义地图控件和样式切换。

1.index.html页面

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8" /> 
	<title>坐标拾取器</title> 
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	
</head>
<body>

<div id="map"></div>
<div id="geocoder" class="geocoder"></div>
<div id="myPageTop" style="display: block; width: 100%; height: 120px; background: #797373;">	
	<table id="myLngLat" style="display: block; position: absolute;  margin-left: 900px;; top: 10px ;">
		<tbody >
			<tr>				
				<td >
					<label id="copyLngLatTips" style="color :#f55159;font-size: 16px; ">点击地图，拾取经纬度</label>
				</td>				
			</tr> 
			<tr>				
				<td>
					<input type="text" id="txtCoordinate" style="font-size: 24px; width:500px; height: 60px;" readonly>
					<button type="button" id="copyLngLat" style="font-size: 20px; height: 60px; width: 100px; margin-left: 20px; background-color: #5068f0; color: #fdfdfd; border-width: 0px ;" >复制</button>
				</td>
			</tr>
		</tbody>
	</table>
</div>


<!--右下角地图样式切换-->
<div id="style-switcher"></div>

<!--左下鼠标经纬度信息-->
<pre id="mouseCoordinates"></pre>

<!--左下角可移动marker信息--&g