OpenStreetMap + Leaflet 当前位置定位

最新推荐文章于 2025-03-17 09:51:21 发布

LittleFiveSmile

最新推荐文章于 2025-03-17 09:51:21 发布

阅读量4.7k

点赞数 2

本文链接：https://blog.csdn.net/LittleFiveSmile/article/details/99643222

版权

本文介绍了如何结合Leaflet与OpenStreetMap利用leaflet-locatecontrol插件实现地图上的当前位置定位功能。通过在HTML和JS中添加必要代码，并配置插件设置，可以展示定位点并选择是否显示圆形区域和Marker标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想用Leaflet在OpenStreetMap上面使用位置定位

我使用了leaflet-locatecontrol插件

实现效果

github 地址：https://github.com/domoritz/leaflet-locatecontrol

Html <head>里面：

<!-- 添加Leaflet的CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />

<!-- 添加Leaflet的JS要确保它在 CSS的后面 -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>


<!-- 添加L.Control.Locate的CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel=&#