微信小程序根據(jù)經(jīng)緯度規(guī)劃路線

微信小程序可以通過API獲取當(dāng)前位置的經(jīng)緯度，那么如果根據(jù)經(jīng)緯度規(guī)劃路線怎么做。

效果圖：

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);
  },
  onLoad: function(options) {
    // 獲取當(dāng)前地圖，設(shè)置經(jīng)緯度，傳遞過來的坐標(biāo)，用戶下單的坐標(biāo)地址。
    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
              }],
            })
          }
        })
      }
    });
  },
  //  兩個(gè)坐標(biāo) 一個(gè)下單地址，一個(gè)工程師接單地址，然后不停的更新工程師的坐標(biāo)位置。
  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%;
}

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店