uniapp 地图轨迹

### 如何在 UniApp 中实现地图轨迹绘制与跟踪 #### 地图组件集成为了实现在 UniApp 应用程序中的地图轨迹绘制与跟踪，首先需要引入适合的地图插件或API。对于UniApp而言，通常会利用其内置的地图组件`<map>`来完成基础的地图展示工作[^2]。 ```html <template> <view>  <map id="myMap" :polyline="polyline"></map> </view> </template> <script> export default { data() { return { polyline: [{ points: [], // 轨迹坐标数组 color: '#FF0000', // 线条颜色 width: 5, // 宽度 dottedLine: true, }] } }, } </script> ``` #### 获取当前位置信息通过调用微信JS-SDK或其他定位服务接口获取用户的实时地理位置数据，并将其转换为可用于显示在地图上的经纬度坐标点。这一步骤是构建运动轨迹的基础[^3]。 ```javascript // 假设已经获得了必要的权限并成功初始化了位置监听器 wx.getLocation({ type: 'wgs84', success(res) { const latitude = res.latitude; const longitude = res.longitude; // 更新data内的points属性以反映最新的位置变化 this.polyline[0].points.push({latitude,longitude}); // 同步刷新视图层的地图路径 this.$nextTick(() => { this.mapContext = uni.createMapContext('myMap'); this.mapContext.includePoints({ padding:[10], points:this.polyline[0].points }); }) } }) ``` #### 将 Composition API 思维应用于逻辑分离借鉴 Vue3 的 Composition API 设计理念，在项目开发过程中可以创建独立的功能模块用于处理特定的任务，比如负责管理所有关于地理信息服务的操作，包括但不限于起点终点设定、途经站点添加以及最终路线规划等复杂业务场景下的需求满足[^1]。 ```typescript import { ref } from "vue"; function useTrackRecording(){ let trackPoints = ref([]); function addPoint(point){ trackPoints.value.push(point); } return {trackPoints,addPoint}; } export {useTrackRecording}; ``` 以上方法能够帮助开发者更好地组织代码结构，提高代码重用性和可读性的同时也简化了后续维护的工作量。

阅读全文