首页uniapp 地图我的位置

uniapp 地图我的位置

时间: 2025-05-13 19:22:48 浏览: 14

### 实现 UniApp 中的地图 API 显示用户位置为了在 UniApp 的 H5 端实现显示用户当前位置的功能，可以采用百度地图 API 来替代默认的腾讯地图组件[^1]。下面介绍具体的实现方法。 #### 准备工作确保已经在百度地图开放平台注册账号并创建应用以获得合法使用的密钥（AK）。此 AK 将用于初始化 Baidu Map SDK 或调用 RESTful Web Service 接口。 #### HTML 和 JavaScript 集成方式通过引入 `<script>` 标签加载百度地图 JS API，在页面中定义容器来承载地图实例，并编写相应的脚本来完成定位与展示操作： ```html  <div id="container"></div> <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> ``` 接着利用 `BMap` 对象及其子类来进行开发，例如设置中心点、缩放级别以及开启自动定位等功能： ```javascript // 创建和初始化地图函数： function initMap(){ var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标，默认北京天安门作为初始位置 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和比例尺大小 function success(position){ let userPoint = new BMap.Point(position.coords.longitude, position.coords.latitude); map.clearOverlays(); // 清除原有标记物 map.panTo(userPoint); // 移动视图到新地点 map.addOverlay(new BMap.Marker(userPoint));// 添加标注 } navigator.geolocation.getCurrentPosition(success); } initMap(); ``` 上述代码片段展示了如何基于浏览器内置地理定位服务获取用户的当前地理位置信息，并将其呈现在百度地图上。

阅读全文