Wechat applet (get location)

It is not difficult to locate wechat applets , But if the first contact is still very ignorant , Here is the record , It is convenient for you to review or learn from !

First of all, there are two key points :

1. Through wechat applet api: wx.getLocation(Object object) Get the current latitude and longitude ; Applet api details
2. Longitude and latitude obtained through reverse address resolution of Tencent map open platform , Get the real landmark name ; Tencent map platform

Specific operation :
( Tencent map operation )
3. Register Tencent map open platform :

4. Apply for developer key （Key）： Request key https://lbs.qq.com/dev/console/key/add
A string will be returned after success key, This key We'll use that later

5. Console -> key management -> Set up （ How to use this function key）-> Check webserviceAPI -> preservation


( Wechat platform operation )
6. Configure the security domain name WeChat public platform https://mp.weixin.qq.com/
. Log in to your applet on wechat public platform -> Development -> Development and setup -> Server domain name -> take https://apis.map.qq.com fill request Legitimate domain name

7. Download the applet sdk( Copy the link to open a new tab to download ) http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip
8. Parsing compressed folders , Put it into the applet project file , You can also create a new folder to store such files , I put it in the newly built libs Internal
9. Use :

//app.json file 
// This is because developers need to fill in the description of how to get the user's geographical location . If it is not configured, you will be prompted to declare 
 {
    
 "permission": {
    
    "scope.userLocation": {
    
        "desc": " Your location information will be used to show the effect of the applet location interface "
    }
}
}

// Introduce... On the page you need to use :
let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;

  getLocation() {
    
        qqmapsdk = new QQMapWX({
    
            key: 'CBAJ-DUD-EURJ-JFFJD' // Previously applied on Tencent platform key
        })

        wx.getLocation({
     // Get the longitude and latitude of the location address 
            type: 'wgs84',
            success(res) {
    
                const latitude = res.latitude
                const longitude = res.longitude
                const speed = res.speed
                const accuracy = res.accuracy

                qqmapsdk.reverseGeocoder({
     //SDK call 
                    location: {
    
                        latitude,
                        longitude
                    },
                    success: (res) => {
    
          //success Method points to closure , therefore this Belongs to closure , So in success Callback functions cannot be used directly this.setData() Of  
         // You can use the outside to this Assign to other variables , Can also pass promise Secondary packaging , Avoid going back to hell 
                        console.log(res)
                    }
                })
            }
        })
    }

My complete implementation :

let QQMapWX = require('./libs/qqmap-wx-jssdk')
let qqmapsdk;

Page({
    
    data: {
    
        location: ' Locate me ...', // Display the positioned data 
    },
    async onShow(options) {
     // Get landmarks if authorization is displayed on the implementation page , No authorization , You can only get it by clicking the get button 
        let res = await wxAuthorize()
        if (res) {
    
            this.getLocation()
        } else {
    
            this.setData({
    
                location: ' Locate me ...' 
            })
        }
    },
    
    async getLocation() {
    
        qqmapsdk = new QQMapWX({
    
            key: 'CBAJ-DUD-EURJ-JFFJD'
        })
        const res = await new Promise((resolve) => {
    
            wx.getLocation({
     // Get address latitude and longitude 
                type: 'wgs84',
                success(res) {
    
                    resolve(res);
                }
            })
        })
        const latitude = res.latitude
        const longitude = res.longitude

        const res2 = await new Promise(resolve => {
    
            qqmapsdk.reverseGeocoder({
     //SDK The call here only needs to be specific to the city , So these two are enough , Specific information can be obtained according to business requirements 
                location: {
    
                    latitude,
                    longitude
                },
                success: (res) => {
    
                    resolve(res) 
                }
            })
        })
        this.setData({
    
            location: res2.result.ad_info.city 
        })
    },

    async getData() {
    
        const isAuth = await wxAuthorize();
        if (isAuth) {
    
            this.getLocation()
        } else {
    
            wx.showModal({
    
                title: ' Please authorize the current location ',
                content: ' Need to get your location , Please authorize !!!',
                showCancel: true,
                confirmText: ' Delegating ',
                success: function (res) {
    
                    if (res.confirm) {
    
                        wx.openSetting({
    
                            success(res) {
    
                                console.log(res.authSetting, res, " Promise to authorize ")
                                this.getLocation()
                            }
                        })
                    }
                }
            });
        }
    },

// Tool function , Packaged Promise, Decide whether to authorize , You can avoid hell 
async function wxAuthorize(scope = 'scope.userLocation') {
    
  return new Promise(resolve => {
    
    wx.authorize({
    
      scope,// Initiate location authorization 
      success: ()=> {
    
        console.log(' Have location authorization ')
        // Authorized success , Call the get location function here 
        resolve(true)
        },
      fail(){
    
        console.log(" Did not agree to authorize the location ")
        resolve(false)
      }
    })
  })
}

})