Notas de desarrollo del proyecto de posicionamiento de puertos 1 · Mini programa WeChat

Recientemente estoy desarrollando un proyecto de posicionamiento de puertos con los miembros de mi equipo. Actualmente soy el principal responsable de la función de obtener la ubicación del personal en el applet de WeChat en tiempo real. Escribo esta nota aquí para ayudarme a revisar el pasado y aprender lo nuevo , y espero ayudar a los programadores que lo necesiten

Demo1: haga clic manualmente en el botón para obtener la posición actual

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
        })
      }
     })

  }

Haga clic para obtener la ubicación actual.
Inserte la descripción de la imagen aquí
Durante el desarrollo de esta demostración, también aparecieron los siguientes problemas

Al obtener la ubicación, "recuerde a getLocation que declare el campo de permiso en app.json"

Agregue el siguiente código al archivo app.json.

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

Inserte la descripción de la imagen aquí

Posicionamiento inexacto usando wx.getLocation

La ubicación que obtuve en la herramienta de desarrollo anterior es muy diferente de donde estoy. Esto se debe a que usamos la ubicación de IP cuando usamos la herramienta de desarrollo para ubicar y simular. Esto también se recuerda en el documento de desarrollo getgetLocation, y se cambia a depuración de máquinas reales. Puede
desarrollar la documentación de wx.getLocation
Inserte la descripción de la imagen aquí

Utilice la función setData para devolver el problema del valor

Desea devolver la información de posición obtenida a la página de primer plano y usarla en el código

this.setData({
    
    
          locInfo:res
        })

No se puede implementar la devolución de llamada.
Esto se debe a que el éxito devuelve un cierre, por lo que debemos agregarle una línea de declaraciones.

const that = this;

Entonces usa a continuación

that.setData({
    
    
          locInfo:res
        })

Puedes darte cuenta de la devolución de llamada
Inserte la descripción de la imagen aquí