This is the sixth day of my participation in Gwen Challenge

1. Demand background

The small program side obtains the user’s geographic location information, and then converts the longitude and latitude information into specific address information.

2. Implementation scheme

2.1 Wake up location service authorization and obtain latitude and longitude.

A. Enable the location service permission in app.json

"Permission ": {"scope.userLocation": {"desc":" Your location information displays the effect of the user applets location interface "}}Copy the code

B. Write code to trigger the awakening authorization panel – click Permit. This scenario does not consider how to boot the user to wake up again after cancelling. This scenario is detailed in another article: how to boot the user to open the popup after refusing authorization?

// WXML <view bindtap="getLocation"> function() { const _this = this wx.getLocation({ type: 'gcj02', success(res){// const res = {// accuracy: 65, // errMsg: "GetLocation: OK ", // horizontalAccuracy: 65, // latitude: 23.08331, // longitude: 113.3172, // speed: -1, // verticalAccuracy: 65 //}}, fail(err){// Const err = {errMsg: "getLocation:fail auth deny"} } }) }Copy the code

Get the user’s current authorization status, and then decide whether to call the wx.getLocation()API. The final code looks like this:

getLocation: function() { const _this = this wx.getSetting({ success(res){ const permissonName = 'scope.userLocation' If (res.authSetting[permissonName] === false){else{wx.getLocation({type:}){res.authSetting[permissonName] === false) 'gcj02', success(res){this.getLocationName(res)}, fail(err){ Function (res = {}){const {latitude, longitude} = res}Copy the code

The getLocationName() above is where the business logic for reverse address resolution is to be done, so read on.

2.2 Reverse Address Resolution

2.2.1 Open Tencent location service

Tencent Location Service official website address:Lbs.qq.com/service/web…

A. Log in to wechat public platform -> Development -> Development tools -> Development ability -> find Tencent Location Service -> Click Open.



B. Click to jump to the official website of Tencent Location Service, and then log in and authorize according to the instructions. Can see the console, means that the small program has successfully opened Tencent location service SDK.

2.2.2 Applying for a Developer key

Console -> My App – Create App – Add Key. Here is the key I have created:Let’s look at the editing interface: it’s important to select the enable product option.

  • WebServiceAPI
  • Map the SDK (Android/IOS)
  • Wechat applets – here you need to select the authorized APP ID

2.2.3 Enabling the webserviceAPI Service

A. On the console, choose Application Management > My Apps > Add Key > Select webserviceAPI > Save. The small program SDK needs to use some services of the webserviceAPI, so the key to use this function must have corresponding permissions.

2.2.4 Download JavaScriptSDK for wechat applets

The SDK download path: mapapi.qq.com/web/minipro… Mapapi.qq.com/web/minipro… Unzip the downloaded files into our project directory (assuming it’s in our root /libs directory)

2.2.5 Setting secure Domain Names

This step is very important. If you skip this step, you will get the following error:Apis.map.qq.com is not in the list of valid request domain names”.



Opening steps: wechat public platform management background -> Development -> Development management -> Development Settings -> Server domain name set HTTPS legal domain name -> Add”apis.map.qq.com”

The diagram below:

At this point, the basic steps of reverse address resolution have been set up. See the demo.

3. The Demo presentation

Var QQMapWX = require('.. /.. /libs/qqmap-wx-jssdk.js') const app = getApp() let qqmapsdk Page({ onLoad: Function () {// instantiate API core class qqmapsdk = new QQMapWX({key: 'developer key' -> remember to modify '// developer key'}); }, getLocation: function() { const _this = this wx.getSetting({ success(res){ const permissonName = 'scope.userLocation' If (res.authSetting[permissonName] === false){else{wx.getLocation({type:}){res.authSetting[permissonName] === false) 'gcj02', success(res){_this.getLocationName(res)}, fail(err){ getLocationName: function(res) { const { latitude , // const location = '${longitude},${longitude}' qqmapsdk.reverseGeocoder({location: Location, get_poi: 1, // Whether to return the list of surrounding POis: 1. Return; Function (res) {// Return console.log(' reverse address resolution ', res); }, fail: function(error) { console.error(error); }, complete: function(res) { console.log(res); }})}})Copy the code

Run the code above and you will find that: network sends an HTTPS request:

Let’s take a look at what the returned data looks like: here you can find the location of the longitude and latitude.

4. Write at the end

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!