uniapp地图轨迹回放

以下是uniapp地图轨迹回放的步骤和代码示例：

1.引入地图组件和工具类

<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方法

/**
 * 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
}