微信小程序根据经纬度规划路线

微信小程序可以通过API获取当前位置的经纬度，那么如果根据经纬度规划路线怎么做。

效果图：

 

1、wxml文件

<view class="mapHeight">
  <map 
    id="map" 
    class="map"
    polyline="{{polyline}}"
    markers="{{markers}}" 
    include-points="{{markers}}"
   ></map>
</view>

2、 js文件

var coors;
Page({
  data: {
    polyline: [],
    markers: [],
  },
  onReady: function() {
    this.mapContext = wx.createMapContext("map", this);
  },
  onl oad: function(options) {
    // 获取当前地图，设置经纬度，传递过来的坐标，用户下单的坐标地址。
    console.log(options);
    wx.getLocation({
      success: (res) => {
        this.setData({
          latitude: options.latitude,
          longitude: options.longitude
        });
        this.getCenterLocation(res);
        wx.request({
          url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=' + this.data.markers[0].latitude + ',' + this.data.markers[0].longitude + '&to=' + this.data.markers[1].latitude + ',' + this.data.markers[1].longitude + '&output=json&callback=cb&key=PD5BZ-K2VRO-CPEWZ-SOBAC-4KCDT-KAFLF',
          success: (res) => {
            coors = res.data.result.routes[0].polyline
            for (var i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000
            }
            console.log(coors)
            //划线
            var b = [];
            for (var i = 0; i < coors.length; i = i + 2) {
              b[i / 2] = {
                latitude: coors[i],
                longitude: coors[i + 1]
              };
              console.log(b[i / 2])
            }
            this.setData({
              polyline: [{
                points: b,
                color: "#00ae20",
                width: 4,
                dottedLine: false
              }],
            })
          }
        })
      }
    });
  },
  //  两个坐标 一个下单地址，一个工程师接单地址，然后不停的更新工程师的坐标位置。
  getCenterLocation: function(res) {
    this.setData({
      markers: [{
          iconPath: "/resources/center.png",
          id: 0,
          latitude: res.latitude,
          longitude: res.longitude,
          width: 30,
          height: 30,
          alpha: 0.8,
          callout: {
            content: " 我的位置 ",
            color: "#ffffff",
            fontSize: 10,
            borderRadius: 10,
            bgColor: "#6e707c",
            padding: 5,
            display: "ALWAYS"
          }
        },
        {
          iconPath: "/resources/user.png",
          id: 1,
          latitude: res.latitude + 0.1,
          longitude: res.longitude + 0.1,
          width: 30,
          height: 30,
          alpha: 0.8,
          callout: {
            content: " 工程师 ",
            color: "#ffffff",
            fontSize: 10,
            borderRadius: 10,
            bgColor: "#6e707c",
            padding: 5,
            display: "ALWAYS"
          }
        }
      ],
    });
  },
});

3、wxss文件

.mapHeight {
  display: flex;
  flex-direction: column;
}
.map {
  flex: 1;
  height: 100vh;
  width: 100%;
}

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店