在 Vue2 中实现
高德地图路线规划功能，需要结合
高德地图的 JavaScript API 来完成
地图初始化、
路线绘制以及交互操作。以下是一个完整的页面代码示例，包含
地图初始化、
驾车路线规划请求与轨迹绘制的逻辑。
### ### 完整 Vue2 页面代码
```html
<template>
<div id="app">
<div id="container" style="width: 100%; height: 100vh;"></div>
<button @click="getDrivingRoute">获取
驾车路线</button>
</div>
</template>
<script>
export default {
name: 'App',
data
() {
return {
map: null,
driving: null,
pathSimplifierIns: null,
routeActive: { value: 0 },
};
},
mounted
() {
this.initMap
();
},
methods: {
initMap
() {
// 初始化
地图
this.map = new AMap.Map
('container', {
zoom: 13,
center: [116.397428, 39.90923],
}
);
// 初始化路径
规划插件
AMap.plugin
(['AMap.Driving'],
() => {
this.driving = new AMap.Driving
({
map: this.map,
panel: 'panel',
}
);
}
);
},
getDrivingRoute
() {
const origin = [116.397428, 39.90923]; // 起点坐标（北京）
const destination = [116.427281, 39.903751]; // 终点坐标（北京）
if
(this.driving
) {
this.driving.search
(origin, destination,
(status, result
) => {
if
(status === 'complete'
) {
this.onDrivingPathRender
(result
);
} else {
console.error
('
路线规划失败：', result
);
}
}
);
}
},
onDrivingPathRender
(data
) {
let routes = data.routes || [];
let route = routes[this.routeActive.value] || {};
let steps = route.steps || [];
let pathList = [];
steps.forEach
((item, index
) => {
let beforePath = null;
if
(index > 0
) {
let beforeData = steps[index - 1];
beforePath = beforeData.path[beforeData.path.length - 1];
}
let pathItem = [...item.path];
if
(beforePath
) {
pathItem.unshift
(beforePath
);
}
pathList.push
(...pathItem
);
}
);
this.map.setFeatures
(['bg', 'point']
);
this.map.setMapStyle
('amap://styles/whitesmoke'
);
//
清除已有
路线
if
(this.pathSimplifierIns
) {
this.map.remove
(this.pathSimplifierIns
);
}
this.pathSimplifierIns = new AMap.Polyline
({
path: pathList,
strokeColor: '#FF33FF',
strokeWeight: 5,
strokeOpacity: 1,
strokeLineCap: 'round',
strokeStyle: 'solid',
strokeDasharray: [10, 5],
}
);
this.map.add
(this.pathSimplifierIns
);
this.map.setFitView
(); // 自动调整视野
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 10px;
}
</style>
```
### ### 使用说明
1. **引入
高德地图 API**
在 `public/index.html` 中添加
高德地图 SDK 的引用：
```html
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的
高德地图Key"></script>
```
2. **替换
地图 Key**
将 `src` 中的 `你的
高德地图Key` 替换为你在
高德开放平台申请的 Web 端 Key。
3. **运行项目**
启动 Vue 项目后，在
地图中点击“获取
驾车路线”按钮即可发起
路线规划，并在
地图上绘制出完整的
路线轨迹。
###
本文详细介绍了如何使用高德地图和百度地图API进行路线规划，包括带途径点的路径规划、路线颜色自定义、起点终点图标设置及路线清除等操作。
最低0.47元/天 解锁文章
扫一扫
1万+
到【灌水乐园】发言
