vue2使用高德地图设置两个标点之前的驾车路线规划
时间: 2023-11-01 18:06:27 浏览: 112
高德地图标注+路线规划
要实现vue2中使用高德地图设置两个标点之间的驾车路线规划,可以按照以下步骤进行:
1. 引入高德地图JavaScript API的SDK文件,并在mounted生命周期中初始化地图对象。
2. 在地图上添加起点和终点标记,并获取它们的经纬度坐标。
3. 调用高德地图JavaScript API中的Driving类,通过起点和终点的经纬度坐标进行路线规划。
4. 在路线规划完成后,可以通过Polyline类将规划好的路线在地图上绘制出来。
下面是一段示例代码,可以作为参考:
```
<template>
<div id="map-container"></div>
</template>
<script>
export default {
mounted() {
// 引入高德地图JavaScript API的SDK文件
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY'
script.onload = () => {
// 初始化地图对象
const map = new window.AMap.Map('map-container', {
center: [116.397428, 39.90923],
zoom: 13
})
// 添加起点和终点标记
const startMarker = new window.AMap.Marker({
position: [116.397428, 39.90923],
map
})
const endMarker = new window.AMap.Marker({
position: [116.519035, 39.938582],
map
})
// 调用Driving类进行路线规划
const driving = new window.AMap.Driving({
map,
panel: 'panel'
})
driving.search([116.397428, 39.90923], [116.519035, 39.938582], (status, result) => {
if (status === 'complete') {
// 绘制规划好的路线
const path = result.routes[0].path
const polyline = new window.AMap.Polyline({
path,
strokeColor: '#3366FF',
strokeWeight: 5,
strokeOpacity: 1
})
polyline.setMap(map)
} else {
console.error(result)
}
})
}
document.head.appendChild(script)
}
}
</script>
```
需要注意的是,上面的示例代码中的YOUR_KEY需要替换成你自己的高德地图API Key。同时,也可以根据自己的需要调整地图的中心点、缩放级别、起点和终点的经纬度坐标等参数。
阅读全文