Vue2高德地图实现轨迹

1、创建标签

<div id="container"></div>

2、下包

npm i @amap/amap-jsapi-loader

3、引入@amap/amap-jsapi-loader和高德申请的秘钥

window._AMapSecurityConfig = {
  securityJsCode: "秘钥",
};
import AMapLoader from "@amap/amap-jsapi-loader";

3、引入高德地图的key，初始化地图

 data() {
    return {
      map: null, //初始化 map 对象
      markers: [], // 存储标记
      polyline: null, //存储划线
      trackPoints: [//自定义点的位置
        [116.44, 39.94],
        [116.45, 39.94],
        [116.45, 39.92],
        [116.44, 39.92],
        [116.44, 39.9],
      ],
    };
  },
  mounted() {
    this.initMapWithData();
  },
  methods: {
    initMapWithData() {
const MAP_PLUGINS = [
  "AMap.Scale",
  "AMap.ToolBar",
  "AMap.ControlBar",
  "AMap.HawkEye",
  "AMap.Circle",
  "AMap.Polygon",
  "AMap.Polyline",
  "AMap.Marker",
  "AMap.Pixel",
  "AMap.InfoWindow",
  "AMap.Icon",
];
      AMapLoader.load({
        key: "申请的key",
        version: "2.0",
        plugins: MAP_PLUGINS,
      }).then((AMap) => {
        const map = new AMap.Map("container", {
          viewMode: "3D",
          terrain: true,
          zoom: 11,
          center: [116.41, 39.91],
        });
        this.map = map;
        this.trajectory(); //轨迹
      });
    },
  }

4、轨迹代码如下：   trackPoints是存放轨迹的经纬度

    // 轨迹
    trajectory() {
      this.addStartPointMarker(); //开始的点
      this.addPolyline(); //轨迹的线
      this.addEndPointMarker(); //结束的点
      this.map.setFitView();
    },
    addStartPointMarker() {
      const icon = new AMap.Icon({
        size: new AMap.Size(20, 30), // 设置图标的宽度和高度
        imageSize: new AMap.Size(20, 30), // 设置图标显示时的大小
        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png", // 自定义图标的 URL
      });
      const startPoint = new AMap.Marker({
        position: this.trackPoints[0],
        map: this.map,
        icon: icon,
        offset: new AMap.Pixel(-10, -30),
      });
      this.markers.push(startPoint);
    },
    addEndPointMarker() {
      const lastPoint = this.trackPoints[this.trackPoints.length - 1];
      const icon = new AMap.Icon({
        size: new AMap.Size(20, 30), // 设置图标的宽度和高度
        imageSize: new AMap.Size(20, 30), // 设置图标显示时的大小
        image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png", // 自定义图标的 URL
      });
      const endPoint = new AMap.Marker({
        position: lastPoint,
        map: this.map,
        icon: icon,
        offset: new AMap.Pixel(-10, -30),
      });
      this.markers.push(endPoint);
    },
    addPolyline() {
      this.polyline = new AMap.Polyline({
        path: this.trackPoints,
        isOutline: true,
        outlineColor: "#ffeeee",
        borderWeight: 2,
        strokeColor: "#0091ff",
        strokeOpacity: 0.9,
        strokeWeight: 6,
        lineJoin: "round",
      });
      this.map.add(this.polyline);
    },

效果如下：