文章来源
因为逛掘金的时候，看到了这篇文章，但是文章写的没头没尾，于是我就按照他给的思路自己实现了一下，感觉效果来不错，就在这里分享给大家一下。
高德地图接入
用这个申请的应用的key可以进行sdk的接入。可以通过高德地图的文档API来查询具体的API如何使用。
本文中主要使用高德地图的4个API
- 初始化地图
- 绘制路径(PathSimplifier)
- 点标记(Marker)
- 信息窗体(InfoWindow)
具体步骤
- 需要初始化地图，首先你要有一个容器去绘制地图，所以你要在
html下有一个div容器，id随便起，然后使用new AMap.Map(#id)的方式去初始化地图，初始化的时候还可以带入参数(中心点、zoom)等。
this.map = new AMap.Map('container', {
center:[x,y],
zoom: 10
})
这里你可以去查询当前你所在位置的坐标作为中心点传入，zoom我的案例里没有使用，因为使用了zoom，初始化的时候会卡一下，不知道具体原因。
- 绑定事件，获取心型坐标。给
map绑定点击事件，每点击一次打一个标记点，然后你画一个心型，记录路径点。此处需要画左右两条路径哦
this.map.on('click', (e) => {
const position = [+e.lnglat.getLng(), +e.lnglat.getLat()]
const marker = new AMap.Marker({
position: [+e.lnglat.getLng(), +e.lnglat.getLat()],
})
if (!window.list) {
window.list = [position]
} else {
window.list.push(position)
}
marker.setMap(this.map)
})
可以通过
window.list来查看所有标记点的坐标，记住这些坐标，后面画线的时候要用哦。(tips:可以先画一条线，然后再控制台把window.list清空，再画另一条线。两条线的坐标点数量尽量一致，防止出现先后抵达的问题。)
- 下面你已经找好了两条线的坐标，下面你需要画两条线了
const initPath = () => {
AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！')
return
}
//启动页面
this.pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: this.map, //所属的地图实例
getPath: function (pathData, pathIndex) {
//返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
return pathData.path
},
})
this.pathSimplifierIns.setData([
{
name: '轨迹1',
path: this.path1,
},
{
name: '轨迹2',
path: this.path2,
},
])
var navg0 = this.pathSimplifierIns.createPathNavigator(
0, //关联第1条轨迹
{
loop: false, //循环播放
speed: 800,
pathNavigatorStyle: {
width: 40,
height: 40,
autoRotate: false, // 禁止调整方向
// 经过路径的样式
pathLinePassedStyle: {
lineWidth: 6,
strokeStyle: 'black',
dirArrowStyle: {
stepSpace: 15,
strokeStyle: 'red',
},
},
//设置头像 不需要可以删除
content: PathSimplifier.Render.Canvas.getImageContent(
aJpg,
onload,
onerror,
),
},
},
)
var navg1 = this.pathSimplifierIns.createPathNavigator(
1, //关联第1条轨迹
{
loop: false, //循环播放
speed: 800,
pathNavigatorStyle: {
width: 40,
height: 40,
autoRotate: false, // 禁止调整方向
// 经过路径的样式
pathLinePassedStyle: {
lineWidth: 6,
strokeStyle: 'blue',
dirArrowStyle: {
stepSpace: 15,
strokeStyle: 'red',
},
},
//设置头像 不需要可以删除
content: PathSimplifier.Render.Canvas.getImageContent(
bJpg,
onload,
onerror,
),
},
},
)
// 设置定时器,方式map加载卡顿时,动画先开始
setTimeout(() => {
navg0.start()
navg1.start()
// 设置途径路上的 说的话
navg1.on('move', (e) => {
const idx = navg1.getCursor().idx // 走到了第几个点
const list = [
'不开门一直敲',
'是一种打扰',
'不回复本身',
'就是一种回复',
'双向奔赴才有意义',
]
let text = ''
if(idx < 3) {
text = list[0]
} else if(idx < 8) {
text = list[1]
} else if(idx < 13) {
text = list[2]
} else if(idx < 17) {
text = list[3]
} else {
text = list[4]
}
const cont = `<div class="toptit">
<p>${text}</p>
</div>`
// 设置气泡
this.infoWindow.setContent(cont)
this.infoWindow.open(this.map, e.target.getPosition())
})
}, 3000)
this.pathSimplifierIns.renderLater()
})
}
- 上面代码把信息窗体漏了,信息窗体也需要初始化,在初始化地图的后就行
mounted() {
this.map = new AMap.Map('container',)
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, 0),
})
}
成品展示
这个demo里面，没有设置头像和要说的话，因为头像icon无法放上去，后续需要的画 可以自己添加哦。
结语
520已经过去了，这个就等着七夕给你们对象制造点浪漫吧。。
