Demand background

The small program needs the user’s authorization to obtain the user’s location, obtain the latitude and longitude request data list and parse it into the city address. When the user selects the city, the city is resolved into the latitude and longitude.

(Project based on Taro+ React)

1. Obtain user authorization (wechat applet documentation – Guide – Open capability – User information – authorization)

Applet authorization class interface when called:

  1. If the user does not accept or reject the permission, a pop-up will ask.
  2. If the user is authorized, the interface can be invoked directly.
  3. If the user has refused authorization, no popup occurs and the interface fail callback is directly entered.
export default {
pages: [
  'pages/index/index',].permission: {
  "scope.userLocation": {
    "desc": "Do YOU allow access to your current geo-location information?"}}},Copy the code

Effect:

2. Obtain the longitude and latitude of the user position

The API is introduced:

  • Wx.getsetting (): Obtains the current authorization status of the user
  • Wx.getlocation (): Gets the current location and speed. This interface cannot be called when the user leaves the applet.
// Determine the current user authorization status
getCurrentLocation = () = > {
   const vm = this;
   // Determine whether the user is authorized to obtain the location
   wx.getSetting({
     success: (res) = > {
       // res.authSetting['scope.userLocation'] == undefined to initialize the page
       // res.authSetting['scope.userLocation'] == false indicates that the page is uninitialized and not authorized
       // res.authSetting['scope.userLocation'] == true indicates location authorization
       if (
         res.authSetting["scope.userLocation"] != undefined &&
         res.authSetting["scope.userLocation"] = =false
       ) {
         // If you are not authorized to enter the page for the first time, you can perform operations here as required
         
       } else {
        // Get the latitude and longitude of the user's positionvm.getLocation(); }}})}// Get the user location
 getLocation() {
   const that = this;
   wx.getLocation({
     type: "gcj02".success(res) {
     // res contains the user location latitude and longitude, speed, and so on
       const latitude = res.latitude;
       const longitude = res.longitude;
       that.setState({
         latitude,
         longitude,
       });
     },
     fail(res) {
       // The user did not give location permission, open the city selector
       // The error message is different between Android and Apple
       if (
         res.errMsg == "getLocation:fail auth deny" ||
         res.errMsg == "getLocation:fail:auth denied"
       ) {
          that.setState({
           areaOpened: true}); }}}); }Copy the code

3. Parse the obtained latitude and longitude information into specific city addresses

With Tencent map inverse address resolution interface, apply for a Tencent map key, into the latitude and longitude can be.

var accessKey = 'XXXXX apply for a Tencent map key by itself'
var qqMapApi =
         "https://apis.map.qq.com/ws/geocoder/v1/" +
         "? location=" +
         latitude +
         "," +
         longitude +
         "&key=" +
         accessKey +
         "&get_poi=1";
wx.request({
     url: qqMapApi,
     header: {
       "Content-Type": "application/json",},data: {},
     method: "GET".success: (res) = > {
       if (res.statusCode == 200 && res.data.status == 0) {
         // Extract the required business geographic information data country, province, city, county, and street from the return valuethat.setAddress(res.data.result.address_component); }},fail: () = > {
       wx.showToast({
         title: "Address resolution failed".icon: "none",})}})Copy the code

4. When selecting a city, the user needs to resolve the city into latitude and longitude

Tencent map address resolution interface

var accessKey = 'XXXXX apply for a Tencent map key by itself'
var qqMapApi =
      "https://apis.map.qq.com/ws/geocoder/v1/?address=" +
      provinceName +
      cityName +
      countyName +
      "&key=" +
      accessKey;
wx.request({
    url: qqMapApi,
    header: {
      "Content-Type": "application/json",},data: {},
    method: "GET".success: (res) = > {
      if (res.statusCode == 200 && res.data.status == 0) {
        that.setState({
          longitude: res.data.result.location.lng,
          latitude: res.data.result.location.lat, }); }},fail: (res) = > {
      wx.hideToast();
      wx.showToast({
        title: "Address resolution failed".icon: "none"}); }});Copy the code

5. After the user rejects authorization, manually open the authorization Settings page

The user can control the authorization status of the applet on the applet Settings screen (upper right corner – About – Upper right Corner – Settings).

The developer can call wx.openSetting to open the setting interface and guide the user to enable authorization.

wx.openSetting({
    success(res) {
      if (res.authSetting["scope.userLocation"]) {
        / / authorized
      } else {
        / / not authorized}}});Copy the code

Can be opened after calling: