Solve a problem:

  1. To get user information in the applet, use the wx.getLocation API, which requires user authorization to be set up before using this API.

  2. The user may turn off the permission to obtain the location when entering the small program. When it is necessary to obtain the location, it is necessary to re-determine whether the user has the permission. If you do not have permission, you need to remind the user to authorize it again.

  3. The user’s location returned by the wx.getLocation interface is in the form of latitude and longitude. You need to use JavaScript SDK to parse the returned latitude longitude information into country, province and city. In the form.

Setting User Authorization

Part of the interface in the small program is required to authorize the user to call. Things like getUserInfo getLocation chooseAddress chooseInvoiceTitle getWeRunData, etc. When we need to use these interfaces in the small program, the first user authorization can be used, we can use wx.openSetting to open the setting interface, guide the user to open authorization.

In addition to user authorization, getLocation also needs to configure the location usage description in app.json during development.

So the first step is to configure the location description in the app.json file

app.json

{
    "permission": {
        "scope.userLocation": {
            "desc": "Your location information will be used to display the effects of the applet location interface."}}}Copy the code

Get latitude and longitude information

The second step is to determine when the user has authorized getLocation in the onLoad method of xx.js on the page that needs to use the getLocation interface.

Get all authorized interfaces using wx.getSetting. The interface returns an authSetting object that contains all the authorization results.

 success(res) {
   console.log(res.authSetting)
   // res.authSetting = {
   //   "scope.userInfo": true,
   //   "scope.userLocation": true
   // }
 }
})
Copy the code

So we can use getSetting in the onLoad method to determine if the user has authorized userLocation

onLoad: function() {
    // Assign this of the current page to the VM to distinguish it from this in the callback function below
    const vm = this

    wx.getSetting({
      success(res) {
        If scope. UserLocation is true, the user is authorized
        if (res.authSetting['scope.userLocation']) {
         // 1.1 Use getLocation to get the latitude and longitude of the user
         wx.getLocation({
             success(res){
                 // 1.2 If the user's location is obtained successfully, latitude and longitude are returned
                 console.log(res)

                 // 1.3 Pass the obtained latitude and longitude value to getAddress to resolve the specific address
                vm.getAddress(res.latitude, res.longitude)
             }
         })
        }else {
            // 2. If the user is not authorized, open the authorization page and guide the user to authorize the user.
            wx.openSetting({
                success(res) {
                    // 2.1 If the secondary authorization allows userLocation, the interface to get location is executed again
                    if (res.authSetting["scope.userLocation"]) {
                         wx.getLocation({
                            success(res){
                                // 2.2 If the user's location is obtained successfully, latitude and longitude are returned
                                console.log(res)

                                // 2.3 Pass the obtained latitude and longitude value to getAddress to resolve the specific address
                                vm.getAddress(res.latitude, res.longitude)
                            }
                        })
                    }
                }
            })
        }
      }
    })
}

Copy the code

The logic of the above code is: when the page is loaded, 1. Get the user authorization list first. And determine whether there is scope. UserLocation permission.

  1. If you have permission, call directlywx.getLocationGets the user’s location. Pass the obtained latitude and longitude positions togetAddress. ingetAddressMethod will convert the latitude and longitude positions to actualCountry province CityFormat address;
  2. If you do not have permission, use itwx.openSettingInterface Enables users to perform secondary authorization on the permission setting interface. Execute the authorization after the authorization is successfulwx.getLocation –> getAddressMethods.

Attention attention attention: The wx.openSetting interface has been changed since October 1, 2018, such as the code directly using wx.openSetting to open the authorization page is no longer used, the new version of the use method refer to open the small program Settings page (wx.openSetting) interface adjustment

Convert the longitude and latitude information toCountry province City

In step 2, after you have the latitude and longitude information, you use a getAddress method to convert the latitude and longitude. In this method, we need to use wechat small program JavaScript SDK as a tool.

When using wechat small program JavaScript SDK, you need to register an account in wechat small program JavaScript SDK and apply for a key. To use this key in the small program, you also need to check the WebServiceAPI of this key

To use ‘wechat small program JavaScriptSDK’, download the wechat small program JavaScriptSDK V1.2 file. Then, the wechat small program JavaScriptSDK file is introduced into xx.js of the current page.

// xx.js
const QQMapWX = require('.. /.. /utils/qqmap-wx-jssdk.js')
Copy the code

Finally implement getAddress method:

    getAddress(latitude, longitude) {
        // Generate an instance of QQMapWX
        let qqmapsdk = new QQMapWX({
            key: 'xxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx'
        })

        // reverseGeocoder resolves latitude and longitude for QQMapWX
        qqmapsdk.reverseGeocoder({
            location: {latitude,longitude},
            success(res) {
                console.log('success', res)
                vm.setData({
                    // ad_info: res.result.ad_info
                    / / city: res. Result. Ad_info})}})}Copy the code

For more information about reverseGeocoder return, see reverseGeocoder Return Information