vue2接入高德地图实现折线绘制、起始点标记和轨迹打点的完整功能（提供Gitee源码）

目录

一、申请密钥

二、安装element-ui

三、安装高德地图依赖

四、完整代码

五、运行截图

六、官方文档

七、Gitee源码

---

一、申请密钥

登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。

​

如图所示填写对应的信息，系统就会自动生成。

​

二、安装element-ui

没安装的看官方文档：Element - The world's most popular Vue UI framework

三、安装高德地图依赖

npm i @amap/amap-jsapi-loader --save

四、完整代码

我也是参考着官方文档写的，把刚才申请好的安全密钥和Key替换进去，然后自己改一下起始点的经纬度信息和轨迹点信息就行了。

思路就是先初始化地图，创建起始点的Marker，再通过for循环遍历list集中的轨迹点CircleMarker并同时为每个轨迹点添加点击事件，把信息窗体（InfoWindow）放进去，这样就能查看每个轨迹点的详细信息了，最后通过创建Polyline实例绘制完整的轨迹路径。

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

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "你的申请的安全密钥",
};
export default {
  name: "HomeView",
  data() {
    return {
      // 地图实例
      map: null,
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索节流阀
      loading: false,
      //起点经纬度
      startPosition:{
        time: '2023-12-19 10:28:10',
        lon: 121.1342347,
        lat: 32.0551446
      },
      //终点经纬度
      endPosition:{
        time: '2023-12-19 10:31:10',
        lon: 121.1835337,
        lat: 32.0486566
      },
      //轨迹点列表
      list:[
        {
          time: '2023-12-19 10:28:10',
          lon: 121.1342347,
          lat: 32.0551446
        },
        {
          time: '2023-12-19 10:28:30',
          lon: 121.1406307,
          lat: 32.0553588
        },
        {
          time: '2023-12-19 10:29:10',
          lon: 121.1475297,
          lat: 32.0555119
        },
        {
          time: '2023-12-19 10:29:30',
          lon: 121.1579859,
          lat: 32.0558791
        },
        {
          time: '2023-12-19 10:29:50',
          lon: 121.1679751,
          lat: 32.0563687
        },
        {
          time: '2023-12-19 10:30:10',
          lon: 121.1820965,
          lat: 32.0571032
        },
        {
          time: '2023-12-19 10:30:20',
          lon: 121.1866958,
          lat: 32.0572256
        },
        {
          time: '2023-12-19 10:30:30',
          lon: 121.1869832,
          lat: 32.0557261
        },
        {
          time: '2023-12-19 10:30:40',
          lon: 121.1869473,
          lat: 32.0534614
        },
        {
          time: '2023-12-19 10:31:10',
          lon: 121.1835337,
          lat: 32.0486566
        }
      ]
    };
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "你申请的Key",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              viewMode: "3D", //是否为3D地图模式
              zoom: 12, //初始化地图级别
              center: [116.324887,40.003069], //初始化地图中心点位置
            });
            //地址逆解析插件
            this.geoCoder = new AMap.Geocoder({
              city: "010", //城市设为北京，默认：“全国”
              radius: 1000, //范围，默认：500
            });
            // 搜索提示插件
            this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
            this.trackPoint();
          })
          .catch((err) => {
            console.log(err)
            // 错误
          });
    },
    createStartPoint(){
      // 创建一个 Icon
      var 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)
      });

      // 将 icon 传入 marker
      var startMarker = new AMap.Marker({
        position: new AMap.LngLat(this.startPosition.lon,this.startPosition.lat),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      // 将 markers 添加到地图
      this.map.add([startMarker]);
    },
    createEndPoint(){
      // 创建一个 icon
      var 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
      var endMarker = new AMap.Marker({
        position: new AMap.LngLat(this.endPosition.lon,this.endPosition.lat),
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      this.map.add([endMarker]);
    },
    trackPoint(){
      this.createStartPoint();
      this.createEndPoint();
      let path = []
      for(let i = 0 ; i < this.list.length ; i++){
        path.push(new AMap.LngLat(this.list[i].lon, this.list[i].lat))
        this.createCircleMarker(this.list[i])
      }
      this.createLine(path)
      //自动缩放地图到合适大小
      this.map.setFitView();
    },
    createCircleMarker(data){
      let center = new AMap.LngLat(data.lon, data.lat);
      let radius = 7; //单位:px
      let circleMarker = new AMap.CircleMarker({
        center: center, //圆心
        radius: radius, //半径
        strokeColor: "blue", //轮廓线颜色
        strokeWeight: 2, //轮廓线宽度
        strokeOpacity: 1, //轮廓线透明度
        fillColor: "rgb(255,255,255)", //圆点填充颜色
        fillOpacity: 1, //圆点填充透明度
        zIndex: 10, //圆点覆盖物的叠加顺序
        cursor: "pointer", //鼠标悬停时的鼠标样式
      });
      let _that = this;
      //创建点标记的点击事件
      circleMarker.on("click", function (e) {
        //信息窗体的内容
        let content = [
          "<div><b>轨迹点信息</b>",
          "经度："+data.lon,
          "纬度："+data.lat,
          "时间："+data.time,
          "</div>",
        ];
        //创建 infoWindow 实例
        let infoWindow = new AMap.InfoWindow({
          content: content.join("<br>"), //传入字符串拼接的 DOM 元素
          anchor: "top-left",
          autoMove:false
        });
        //打开信息窗体
        infoWindow.open(_that.map, e.lnglat);
      });
      //圆形 circleMarker 对象添加到 Map
      this.map.add(circleMarker);
    },
    createLine(path){
      //创建 Polyline 实例
      let polyline = new AMap.Polyline({
        path: path,
        showDir: true,
        strokeColor: "#039bc5", //线颜色
        strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        zIndex: 5, //圆点覆盖物的叠加顺序
        strokeStyle: "solid",  //线样式
      });
      this.map.add(polyline);
    }
  },
  mounted() {
  },
};
</script>

<style>
.container {
  margin-top: 10px;
  width: 1280px;
  height: 720px;
}
</style>

五、运行截图

​

六、官方文档

更多教程参考高德官方文档：折线-线-进阶教程-地图 JS API 2.0 | 高德地图API

七、Gitee源码

码云地址：vue2接入高德地图实现折线绘制+起始点标记+轨迹打点的完整功能