Wechat applet -- 365 notes the 44th day --- get the user's authorized geographical location, longitude and latitude

Keywords: JSON Programming

Demand:
1. When entering the page, request the user's geographic location authorization to obtain the user's current geographic location;
2. Get the longitude and latitude of users, sometimes it is necessary to calculate the distance between users and stores by longitude and latitude;

Steps:
1. Wechat applet background will add the domain name to the currently used APPID domain name;
2. Download qqmap.wx-jssdk.js and qqmap.wx-jssdk.min.js Package, put in the folder where the applet is located;
3. Request to download the package at the top of the page that needs to obtain the user's geographic location;
code:

    var QQMapWX = require('../qqmap-wx-jssdk.js');
    var qqmapsdk = new QQMapWX({
      key: 'Applet key' // Required
    });

4. Specific implementation code:

      //Execute the getUserLocation function in onload
     //Get user geographic location
     getUserLocation: function () {
        let vm = this;
        wx.getSetting({
          success: (res) => {
            console.log(JSON.stringify(res))
            // res.authSetting ] scope.userLocation '] = = undefined means that the page is initialized
            // res.authSetting ] scope.userLocation '] = = false means that the user enters the page uninitialized and unauthorized
            // res.authSetting ] scope.userLocation '] = = true indicates geographic authorization
            if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
              wx.showModal({
                title: 'Request authorization current location',
                content: 'Need to get your location, please confirm authorization',
                success: function (res) {
                  if (res.cancel) {
                    wx.showToast({
                      title: 'Denial of authorization',
                      icon: 'none',
                      duration: 1000
                    })
                  } else if (res.confirm) {
                    wx.openSetting({
                      success: function (dataAu) {
                        if (dataAu.authSetting["scope.userLocation"] == true) {
                          wx.showToast({
                            title: 'Authorization successful',
                            icon: 'success',
                            duration: 1000
                          })
                          //Authorize again, call wx.getLocation API for
                          vm.getLocation();
                        } else {
                          wx.showToast({
                            title: 'privilege grant failed',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      }
                    })
                  }
                }
              })
            } else if (res.authSetting['scope.userLocation'] == undefined) {
              //call wx.getLocation API for
              vm.getLocation();
            } else {
              //call wx.getLocation API for
              vm.getLocation();
            }
          }
        })
      },
      // Wechat obtains latitude and longitude
      getLocation: function () {
        let vm = this;
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            console.log(JSON.stringify(res))
            var latitude = res.latitude
            var longitude = res.longitude
            var speed = res.speed
            var accuracy = res.accuracy;
            vm.getLocal(latitude, longitude)
            vm.setData({
              latitude: latitude,
              longitude: longitude
            })
          },
          fail: function (res) {
            console.log('fail' + JSON.stringify(res))
          }
        })
      },
      // Get current geographic location
      getLocal: function (latitude, longitude) {
        let vm = this;
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res)
            wx.setStorageSync("location", res.result.address_component);
            let province = res.result.ad_info.province;
            let city = res.result.ad_info.city;
            vm.setData({
              province: province,
              city: city,
              latitude1: latitude,
              longitude1: longitude
            })
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
            var latitudeArr = res.result.location;
            console.log(latitudeArr)
            vm.setData({
              latitudeArr: latitudeArr
            })
          }
        });
      },

Love front-end, love programming, love to share, welcome to talk about various technical problems, progress together, grow together! Wechat: Zhang_ one billion three hundred and thirty-seven million six hundred and eight thousand one hundred and forty-eight

Posted by aseaofflames on Mon, 29 Jun 2020 22:01:07 -0700