mapCtx.moveToLocation()

`mapCtx.moveToLocation()` 是小程序中用于移动地图视野到用户当前位置的 API。调用该 API 后，地图将会自动移动到用户当前位置，并在地图上显示一个定位点标记。

需要注意的是，`moveToLocation()` 方法需要在 `wx.getLocation()` 获取到用户位置后才能调用，否则会报错。同时，该方法也需要用户授权获取位置信息。

相关问题

请介绍微信开发者工具中的toLocation、getLocation、openLocation和moveToLocation

1. toLocation：该方法用于将地图中心点移动到指定的经纬度坐标上，语法为：`mapCtx.toLocation(options)`。其中，`options`为对象类型，包含以下属性：

- latitude：目标纬度，浮点数，范围为-90~90。
- longitude：目标经度，浮点数，范围为-180~180。
- success：接口调用成功的回调函数。
- fail：接口调用失败的回调函数。
- complete：接口调用结束的回调函数（调用成功、失败都会执行）。

2. getLocation：该方法用于获取用户当前的地理位置信息，语法为：`wx.getLocation(options)`。其中，`options`为对象类型，包含以下属性：

- type：坐标系类型，可选值为 wgs84、gcj02，默认为 wgs84。
- altitude：是否需要返回高度信息，布尔值，默认为 false。
- success：接口调用成功的回调函数。
- fail：接口调用失败的回调函数。
- complete：接口调用结束的回调函数（调用成功、失败都会执行）。

3. openLocation：该方法用于打开地图，显示指定的位置，语法为：`wx.openLocation(options)`。其中，`options`为对象类型，包含以下属性：

- latitude：目标纬度，浮点数，范围为-90~90。
- longitude：目标经度，浮点数，范围为-180~180。
- name：位置名称，字符串类型，用于展示在地图上方的气泡。
- address：位置地址的详细说明，字符串类型。
- scale：地图缩放级别，整数类型，范围为5~18，默认为18。
- success：接口调用成功的回调函数。
- fail：接口调用失败的回调函数。
- complete：接口调用结束的回调函数（调用成功、失败都会执行）。

4. moveToLocation：该方法用于移动地图中心点到当前定位点，语法为：`mapCtx.moveToLocation()`。其中，`mapCtx`为地图组件的上下文对象。该方法没有参数，调用时会自动将地图中心点移动到当前定位点。

uniapp map实现APP 车辆轨迹回放

要实现车辆轨迹回放，可以使用uniapp的map组件。以下是步骤:

1.引入map组件: 在页面的vue文件里，先引入map组件。如下：

<template>
  <view>
    <map :show-location="true" :markers="markers"></map>
  </view>
</template>
 
<script>
import {uniMap} from '@dcloudio/uni-ui';
export default {
  components: {
    uniMap
  },
  data(){
    return {
      markers: []
    }
  }
}
</script>

2.设置地图样式: 在页面的style里，设置map组件的高度和宽度

<style>
  map {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
</style>

3.加载地图: 在mounted钩子函数里调用uniMap的createMap方法，创建地图

mounted(){
  this.createMap();
},
methods: {
  createMap(){
    let mapCtx = uniMap.createMapContext('myMap', {
      showLocation: true
    })
    mapCtx.moveToLocation();
  }
}

4.显示轨迹: 使用setMarkers方法，将要显示的轨迹点添加到地图上

let markers = [
  {
    id: 1,
    longitude: 113.324520,
    latitude: 23.10229,
    iconPath: '/static/img/car.png',
    width: 50,
    height: 50,
    callout: {
      content: '起点'
    }
  },
  {
    id: 2,
    longitude: 113.35938,
    latitude: 23.09211,
    iconPath: '/static/img/car.png',
    width: 50,
    height: 50,
    callout: {
      content: '终点'
    }
  },
  {
    id: 3,
    longitude: 113.331441,
    latitude: 23.117706,
    iconPath: '/static/img/car.png',
    width: 50,
    height: 50,
    callout: {
      content: '中间点'
    }
  }
]
this.markers = markers;

5.轨迹回放: 使用定时器和moveToLocation方法，按照轨迹点顺序将地图移动到对应的位置

play(){
  let mapCtx = uniMap.createMapContext('myMap', {
    showLocation: true
  })
  let i = 0;
  let len = markers.length;
  let timer = setInterval(() => {
    if(i >= len - 1){
      clearInterval(timer);
      return;
    }
    i++;
    mapCtx.moveToLocation({
      longitude: markers[i].longitude,
      latitude: markers[i].latitude
    })
  }, 1000)
}

以上就是实现车辆轨迹回放的步骤。需要注意的是，地图的显示需要设置高度和宽度，因为地图是一个fixed定位的元素。另外，回放轨迹时需要使用定时器来控制地图移动的速度。