vue-amap中轨迹回放和自定义点标注

一.安装

npm install -S vue-amap

二.引入

import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
  key: '去高德地图官网申请key',
  plugin: [
    'AMap.Autocomplete',  //输入提示插件
    'AMap.PlaceSearch',  //POI搜索插件
    'AMap.Scale',  //右下角缩略图插件 比例尺
    'AMap.OverView',  //地图鹰眼插件
    'AMap.ToolBar',  //地图工具条
    'AMap.MapType',  //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor',  //编辑 折线多，边形
    'AMap.CircleEditor',  //圆形编辑器插件
    "AMap.Geolocation"  //定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  uiVersion: '1.0',
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});
Vue.use(VueAMap);

注册账号须知

三.使用

<template>
  <div class="mapcontainer">
    <div class="map-container">
      <el-amap
          :center="center"
          :amap-manager="amapManager"
          :zoom="zoom"
          :plugins="plugins"
          :events="events"
          :resize-enable="true"
          class="map"
      >
      </el-amap>
    </div>
    <!--    <div class="toolbar">-->
    <!--      <button @click="checkLoad()">轨迹回放</button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'

const amapManager = new AMapManager()
export default {
  name: 'MapTrack',
  components: {},
  props: {
    mapData: {
      type: Array
    }
  },
  data() {
    return {
      zoom: 18,
      center: [],
      plugins: [],
      polyline: [],
      markers: [],
      amapManager,
      events: {
        init(map) {
          console.log('map init ok', map)
        }
      }
    }
  },
  mounted() {
    let arr = this.mapData[0].signInGeo.split(',')
    this.center = [Number(arr[0]), Number(arr[1])]
    this.checkLoad()
  },
  methods: {
    checkLoad() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.startTrack()
      })
    },
    startTrack() {
      let map = amapManager.getMap()

      // 轨迹点
      const lineArr = []

      // const lineArr =[
      //   { lng: 113.763924, lat: 22.938634 },
      //   { lng: 113.759621, lat: 22.933625 },
      //   { lng: 113.76654, lat: 22.934174 },
      //   { lng: 113.766558, lat: 22.932916 },
      //   { lng: 113.766558, lat: 22.932916 },
      //   { lng: 113.768745, lat: 22.93173 },
      //   { lng: 113.76945, lat: 22.930731 },
      //   { lng: 113.772022, lat:  22.93014 },
      //   { lng: 108.952789, lat:  34.348938 }]

      for (let i = 0; i < this.mapData.length; i++) {
        let arr = this.mapData[i].signInGeo.split(',')
        lineArr.push([Number(arr[0]), Number(arr[1])])
      }
      // this.markers = lineArr
      // 创建主体

      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(48, 48),
        // 图标的取图地址
        image: require('@/assets/images/location.png'),
        // 图标所用图片大小
        imageSize: new AMap.Size(24, 24),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(1, 1)
      })

      lineArr.map(item => {
        new AMap.Marker({
          map: map,
          position: item,
          icon: startIcon,
          offset: new AMap.Pixel(-12, -24)
        })
      })

      let marker = new AMap.Marker({
        map: map,
        position: this.center,
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90
      })

      // 绘制轨迹
      new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', //线颜色
        strokeWeight: 8, //线宽
        strokeOpacity: 1, //线透明度
        strokeStyle: 'solid' //线样式
      })

      // 回执经过的轨迹
      let passedPolyline = new AMap.Polyline({
        map: map,
        showDir: true,
        strokeColor: '#AF5', //线颜色
        strokeWeight: 8 //线宽
      })

      //经过轨迹的更新
      marker.on('moving', function(e) {
        passedPolyline.setPath(e.passedPath)
      })

      // 自动适配视图
      map.setFitView()

      // 开始沿坐标移动
      marker.moveAlong(lineArr, 1000)
    }
  }
}
</script>

<style scoped lang="scss">
.map-container {
  background: #2ac1bb;
  margin: 12px;
  .map {
    height: 490px;
  }
}
</style>

实现效果