Wechat applet - get user location (longitude and latitude + city)

Wechat applet - Get the user's location （ Longitude and latitude + city ）

One 、 The goal is

Get the user's city

Two 、 Realize the idea

1. Use the interface function of wechat applet to obtain the longitude and latitude of the user's position

2. Change latitude and longitude Inverse analysis For structured text addresses

3. Extract the required address structure components according to the structured text address , Such as province 、 City 、 Districts and counties, etc .

3、 ... and 、 Implementation steps

3.1 Interface functions used

Wechat applet - Get the interface function of the user location ：wx.getLocation(Object object)

You also need to use applet configuration ：permission

Tencent location service - Reverse address resolution （ Coordinate position description ） The interface function ：reverseGeocoder(options:Object)

3.2 Specific steps

3.2.1 Create interface

wxml file

<view class="view1"> Click to get user location </view>
<view class="view2"> Longitude of the user's location ：{
   {latitude}}</view>
<view class="view2"> Latitude of the user's location ：{
   {longitude}}</view>
<view class="view2"> User City ：{
   {city}}</view>

wxss file

.view1 {
  background-color: yellow;
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.view2 {
  background-color: yellow;
  width: 100%;
  height: 100rpx;
  margin-bottom: 20rpx;
}

js file

// index.js
//  Get application instance 
const app = getApp()

Page({
    
  data: {
    
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
    
  },
  
})

Interface effect

3.2.2 Get the latitude and longitude of the user's position

Write a function that triggers the acquisition of longitude and latitude of the user's position getLocation, Call in function wx.getLocation Interface , Get the longitude 、 Latitude and other information , Then bind to the front-end interface .

3.2.2.1 stay app.json Configuration in file permission

When users first use this function , The applet asks the user whether he is authorized to obtain the user's location information . Don't ask again .（ Clear the cache of developer tools 、 After recompiling the applet, it will ask again , Because the authorization information of the previous user has been cleared ）

app.json file

{
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",

  // Add the following code （ The above code is already available after creating the applet project ）
  "permission": {
    
    "scope.userLocation": {
    
      "desc": " Your location information will be used to show the effect of the applet location interface "
    }
  }
}

3.2.2.2 call wx.getLocation Interface

wxml file

// newly added bindtap This function , Make the user click this view It can trigger the function of obtaining the user's location 
<view class="view1" bindtap="getLocation"> Click to get user location </view>

js file

// index.js
//  Get application instance 
const app = getApp()

Page({
    
  data: {
    
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
    
  },
  
  //  Add the following code 
  getLocation() {
    
    var that = this;
    wx.getLocation({
    
      type: 'wgs84',
      success (res) {
    
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        console.log(res) // Output the obtained longitude and latitude information to the console for inspection 
        that.setData({
     // Will get the longitude 、 The latitude values are assigned to local variables 
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
     })
  }
})

effect

3.2.3 Get the user's city

3.2.3.1 Configuration outside the applet

Apply for one in Tencent location service key

according to Tencent location service - Wechat applet Javascript In the development guide 【 Introduction and use restrictions 】 The instructions in , Complete the following steps .

Download the applet JavaScriptSDK

stay Tencent location service website Download it （ A choice , I downloaded it v1.2）, Save to wechat applet project directory .

Unzip the downloaded compressed package to the current folder .

Security domain name settings

Sign in Wechat applet public platform , Using this applet appid（ Or the test number of your wechat account ） Sign in , stay “ Server domain name ” To configure request Legitimate domain name ：https://apis.map.qq.com.

3.2.3.2 call reverseGeocoder Interface

js file

// index.js
//  Get application instance 
const app = getApp()

// newly added 
//  introduce SDK Core class , Write this according to the path you put SDK Location of core classes 
var QQMapWX = require('../../qqmap-wx-jssdk.js');

// newly added 
//  Instantiation API Core class 
var qqmapsdk = new QQMapWX({
    
  key: '……' //  Required , Fill in your application for Tencent location service key
});

Page({
    
  data: {
    
    latitude: null,
    longitude: null,
    city: null
  },
  
  onLoad() {
    
    
  },
  
  getLocation() {
    
    var that = this;
    wx.getLocation({
    
      type: 'wgs84',
      success (res) {
    
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        console.log(res)
        that.setData({
    
          latitude: res.latitude,
          longitude: res.longitude
        })
        
        // newly added 
        qqmapsdk.reverseGeocoder({
    
          // coordinates , Get the current location by default , Not a required parameter  
          //Object Format 
          location: {
    
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function(res) {
    // Callback after success 
            console.log(res.result.ad_info.city);
            that.setData({
    
              city: res.result.ad_info.city
            })
            },
          fail: function(error) {
    
            console.error(error);
          },
          complete: function(res) {
    
            console.log(res);
          }
          })
      }
     })
  }
})

effect

Reference resources

Wechat applet to get the current location and city name