目录
一、申请密钥
二、安装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接入高德地图实现折线绘制+起始点标记+轨迹打点的完整功能
