Port Positioning Project Development Notes 1·WeChat Mini Program

Recently I am developing a port positioning project with my team members. I am currently mainly responsible for the function of obtaining the location of personnel in the WeChat applet in real time. I write this note here to help myself review the past and learn the new, and I hope to help the coders in need.

Demo1: Manually click the button to get the current position

index.wxml

<view class="longitude info">当前经度：{
   
   {locInfo.longitude}}</view>
<view class="latitude info">当前纬度：{
   
   {locInfo.latitude}}</view>
<view class="speed info">当前速度：{
   
   {locInfo.speed}}</view>
<view class="accuracy info">位置精度：{
   
   {locInfo.accuracy}}</view>
<button type="primary" bindtap="getLoca">获取当前位置</button>

index.wxss

.info{
    
     border: 1px solid red; padding: 20rpx 20rpx; margin: 10rpx 10rpx; }

index.js

getLoca(){
    
    
    const that = this;
    wx.getLocation({
    
    
      type: 'wgs84',
      isHighAccuracy: true,
      success (res) {
    
    
        const latitude = res.latitude //纬度，范围为 -90~90，负数表示南纬
        const longitude = res.longitude //经度，范围为 -180~180，负数表示西经
        const speed = res.speed
        const accuracy = res.accuracy //位置的精确度
        that.setData({
    
    
          locInfo:res
        })
      }
     })

  }

Click to get the current location.
Insert picture description here
During the development of this demo, the following problems also appeared

When getting the location, "remind getLocation to declare the permission field in app.json"

Add the following code to the app.json file.

 "permission": {
    
    
    "scope.userLocation": {
    
    
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
    },

Insert picture description here

Inaccurate positioning using wx.getLocation

The location I obtained in the development tool above is very different from where I am. This is because we use the IP location when using the development tool to locate and simulate. This is also reminded under the getgetLocation development document, and it is changed to real machine debugging. You can
develop wx.getLocation documentation
Insert picture description here

Use the setData function to call back the value problem

Want to call back the obtained position information res to the foreground page, and use it in the code

this.setData({
    
    
          locInfo:res
        })

Cannot implement callback.
This is because success returns a closure, so we need to add a line of statements to it

const that = this;

Then use below

that.setData({
    
    
          locInfo:res
        })

You can realize the callback
Insert picture description here