微信小程序怎么通過API獲取當前位置的經緯度

本篇內容介紹了“微信小程序怎么通過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);
  },
  onLoad: 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%;
}

“微信小程序怎么通過API獲取當前位置的經緯度”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！