微信小程序 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>​​​​​
  • 示例图片: