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({// 你申请的Keykey: "你申请的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(){// 创建一个 Iconvar 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 传入 markervar 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(){// 创建一个 iconvar 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 传入 markervar 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; //单位:pxlet 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 对象添加到 Mapthis.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接入高德地图实现折线绘制+起始点标记+轨迹打点的完整功能