港口定位專案開發筆記1·微信小程式端

最近在和組員開發一個港口定位的專案，我目前主要負責微信小程式端實時獲取人員位置的功能，在此寫這個筆記既是為了幫助自己溫故知新，也希望可以幫助到需要的碼友

Demo1:手動點擊按鈕獲取當前位置

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

  }

點擊獲取當前位置
在這里插入圖片描述
在開發這個demo的程序也出現了下面的問題

獲取位置時“提醒getLocation需求在app.json中宣告permission欄位”

在app.json檔案中加入下面的代碼即可.

 "permission": {
    "scope.userLocation": {
    "desc": "你的位置資訊將用于小程式位置介面的效果展示"
    }
    },

在這里插入圖片描述

使用wx.getLocation定位不準確問題

我在上邊開發工具中獲取的位置與我所在的位置偏差是很大的，這是因為我們使用開發工具定位模擬時使用的是IP定位，這在getgetLocation開發檔案下也有提醒，改為真機除錯即可
wx.getLocation開發檔案
在這里插入圖片描述

利用setData函式回呼值問題

想要把獲取的位置資訊res回呼到前臺頁面，在代碼中使用

this.setData({
          locInfo:res
        })

無法實作回呼
這是因為success回傳的是閉包，所以我們需要在其中加入一行陳述句

const that = this;

然后在下面使用

that.setData({
          locInfo:res
        })

即可實作回呼
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/244297.html

標籤：其他

上一篇：CSS入門筆記4

下一篇：JavaScript——操作表單（MD5驗證）