uniapp地图轨迹

＊＊＊于Vue.js的跨平台开发框架，它可以用于开发多个平台上的应用程序，包括移动端应用。如果你想要在uniapp中使用地图轨迹功能，你可以使用第三方的地图插件来实现。

目前比较常用的地图插件有uni-app-amap、uni-app-baidu-map等。这些插件提供了丰富的地图功能和API，可以实现地图显示、定位、标注、轨迹等功能。

具体使用方法可以参考插件的官方文档，一般来说，你需要先在项目中引入地图插件，然后在页面中使用相应的组件进行地图展示和轨迹绘制。根据不同的插件，可能还需要进行一些配置和权限设置。

相关问题

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
}

uniapp地图路线轨迹

要在uniapp中显示地图路线轨迹，可以使用uniapp的插件uView提供的uView-uniapp插件中的uView-AMap组件。该组件集成高德地图SDK，可以方便地使用高德地图的API。

在使用uView-AMap组件时，可以使用其提供的polyline组件来绘制路线轨迹。需要先通过高德地图SDK获取到路线规划的坐标点，然后将这些坐标点传入polyline组件中进行绘制。

以下是一个简单的示例代码：

<template>
  <view>
    <u-view-amap :longitude="longitude" :latitude="latitude" :markers="markers" :polyline="polyline"></u-view-amap>
  </view>
</template>

<script>
import uViewAMap from '@/uview-amap/uview-amap.vue'

export default {
  components: {
    uViewAMap
  },
  data () {
    return {
      longitude: 116.397428,
      latitude: 39.90923,
      markers: [
        {
          id: 1,
          longitude: 116.397428,
          latitude: 39.90923,
          title: 'Marker1'
        }
      ],
      polyline: {
        points: [
          {longitude: 116.397428, latitude: 39.90923},
          {longitude: 116.398258, latitude: 39.90864},
          {longitude: 116.398265, latitude: 39.907637}
        ],
        color: '#FF0000DD',
        width: 5,
        dottedLine: false
      }
    }
  }
}
</script>