微信小程序 map 组件显示规划的行程路线
示例代码如下:
getDriverRoute() {
myAmapFun.getDrivingRoute({
origin: `${this.startPoint.longitude},${this.startPoint.latitude}`,
destination: `${this.endPoint.longitude},${this.endPoint.latitude}`,
strategy: 5,
success: (res) => {
const points = [];
const { steps } = res.paths[0];
for (let item of steps) {
item.polyline = item.polyline.split(";");
for (let line of item.polyline) {
points.push({
longitude: line.split(",")[0],
latitude: line.split(",")[1],
});
}
}
this.polyline = [
{
points: points,
color: "#12c983",
width: 8,
arrowLine: false,
},
];
},
});
}
- 整体思路很简单,先使用
高德地图小程序 SDK 的 getDrivingRoute 方法
获取到路线规划信息,再先从 res.route.paths[0].steps 中获取到规划的路线信息,然后将其中的数据格式转化为 map 组件 的 polyline 属性需要的格式,即
{points: [{latitude: 0, longitude: 0}, ...]}
,最后对 polyline 赋值,将线路渲染在 map 组件上。 - map 组件:
<map id="map" :markers="markers" :polyline="polyline"></map>
- 示例图片: