uniapp地图轨迹

### 如何在 UniApp 中实现地图轨迹绘制与跟踪 #### 地图组件集成 为了实现在 UniApp 应用程序中的地图轨迹绘制与跟踪，首先需要引入适合的地图插件或API。对于UniApp而言，通常会利用其内置的地图组件`<map>`来完成基础的地图展示工作[^2]。 ```html <template> <view> <!-- 使用uni-app自带的地图组件 --> <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}; ``` 以上方法能够帮助开发者更好地组织代码结构，提高代码重用性和可读性的同时也简化了后续维护的工作量。

以下是uniapp地图轨迹回放的步骤和代码示例： 1.引入地图组件和工具类 ```vue <template> <view> <map :longitude="longitude" :latitude="latitude" :polyline="polyline" :include-points="true" :show-location="true" :markers="markers" style="width: 100%; height: 100%;"></map> </view> </template> <script> import { wgs84togcj02 } from '@/utils/utils.js' export default { data() { return { longitude: 0, latitude: 0, polyline: [], markers: [] } }, onLoad() { // 获取轨迹点数据 const points = [ { longitude: 116.397477, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 }, { longitude: 116.397529, latitude: 39.908692 } ] // 将轨迹点数据转换为地图组件需要的格式 const polyline = [{ points: points.map(item => { const { longitude, latitude } = wgs84togcj02(item.longitude, item.latitude) return { longitude, latitude } }), color: '#0000FF', width: 10, borderWidth: 2, arrowLine: true }] // 将第一个点作为地图中心点 const { longitude, latitude } = points[0] // 将轨迹点数据转换为地图组件需要的格式 const markers = [{ id: 1, longitude, latitude, iconPath: '/static/images/location.png', width: 30, height: 30 }] this.longitude = longitude this.latitude = latitude this.polyline = polyline this.markers = markers } } </script> ``` 2.在工具类中添加wgs84togcj02方法 ```javascript /** * WGS84转GCJ02 * @param {Number} lng 经度 * @param {Number} lat 纬度 * @returns {Object} GCJ02坐标系下的经纬度 */ export function wgs84togcj02(lng, lat) { if (out_of_china(lng, lat)) { return { lng, lat } } else { let dlat = transformlat(lng - 105.0, lat - 35.0) let dlng = transformlng(lng - 105.0, lat - 35.0) let radlat = lat / 180.0 * PI let magic = Math.sin(radlat) magic = 1 - ee * magic * magic let sqrtmagic = Math.sqrt(magic) dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI) dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI) let mglat = lat + dlat let mglng = lng + dlng return { lng: mglng, lat: mglat } } } function transformlat(lng, lat) { let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)) ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0 ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0 return ret } function transformlng(lng, lat) { let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)) ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0 ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0 return ret } function out_of_china(lng, lat) { return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271 } ```