vue 引入高德地图显示轨迹

1. 引入vue-amap

main.js

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

2.页面内使用

    <div class="amap-page-container">
      <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-polyline :editable="polyline.editable" strokeColor="#FF2D14"  :path="polyline.path" :events="polyline.events"></el-amap-polyline>
         <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :icon="marker.icon" :visible="marker.visible" :draggable="marker.draggable" :vid="index" :key="index"></el-amap-marker>
      </el-amap>
    </div>

 data() {
    return {
     zoom: 12,
          center: [121.5273285, 31.25515044],//地图居中显示坐标
          polyline: {  
            path: [[121.5389385, 31.21515044], [121.5389385, 31.29615044], [121.5273285, 31.21515044]],//坐标轨迹序列
            editable: false
          },
          markers: [
            {
              position: [121.5389385, 31.21515044],//起点坐标
              icon:qidian, //起点坐标图片
              visible: true,
              draggable: false,
            },
            {
              position: [121.5273285, 31.21515044],//终点坐标
              icon:zhong, //终点坐标图片
              visible: true,
              draggable: false,
            }            
          ],
    }
}

参考：https://www.wenjiangs.com/doc/efbjujfb