在地图（高德）上的运行轨迹

高德地图自带的，根据用户运动，画出运动轨迹，有起点和终点
用vue以及element-ui实现的，

运动轨迹

页面布局

<div id="map"></div>

js部分
在mounted时候，加载地图,MP存在其他文件，mapKey是你地图的密钥

async mounted () {
    await MP (this.mapKey)
    this.mapRoute()
},
methods: {
  mapRoute () {
      let data = ‘获取到的数据’
      // let data = [{lng: 116.478935, lat: 39.997761}, {lng: 116.478939, lat: 39.997825}, {lng: 116.478912, lat: 39.998549}, {lng: 116.478912, lat: 39.998549}, {lng: 116.478998, lat: 39.998555}]
      let lineArr = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].lat && data[i].lng) {
          lineArr.push([data[i].lng, data[i].lat])
        }
      }
      let map = new AMap.Map('map', {
         center: lineArr[0],
         zoom: 14
      })
     // 起始标记
      let startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(135, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(-9, -3)
      })
      let startMarker = new AMap.Marker({
        map: map,
        position: lineArr[0],
        icon: startIcon,
        offset: new AMap.Pixel(-10, -13),
        autoRotation: true
      })
      // 创建一个 icon
      let endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
      })
      // 将 icon 传入 marker
      let endMarker = new AMap.Marker({
        position: new AMap.LngLat(lineArr[lineArr.length - 1][0], lineArr[lineArr.length - 1][1]),
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
      })
      let polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        // strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      })
      map.add([startMarker, endMarker])
      map.setFitView() // 适应地图
    }
}

css

#map {
  width: 100%;
  height: 100%;
}