ポートポジショニングプロジェクト開発ノート1・WeChatミニプログラム

最近、チームメンバーと一緒にポートポジショニングプロジェクトを開発しています。現在、WeChatアプレット内の担当者の位置をリアルタイムで取得する機能を主に担当しています。このメモをここに書き込んで、過去を確認し、新しいことを学習できるようにします。、そして私は困っているコーダーを助けたいと思っています

デモ1：ボタンを手動でクリックして現在の位置を取得します

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

  }

クリックして現在の場所を取得します。
ここに画像の説明を挿入
このデモの開発中に、次の問題も発生しました

場所を取得するときは、「getLocationにapp.jsonの権限フィールドを宣言するように通知してください」

次のコードをapp.jsonファイルに追加します。

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

ここに画像の説明を挿入

wx.getLocationを使用した不正確なポジショニング

上記の開発ツールで取得した場所は、現在の場所とは大きく異なります。これは、開発ツールを使用して場所を特定してシミュレートするときにIPの場所を使用するためです。これは、getgetLocation開発ドキュメントでも通知され、次のように変更されます。実際のマシンのデバッグ。wx.getLocationドキュメントを作成できます。

ここに画像の説明を挿入

setData関数を使用して、値の問題をコールバックします

取得した位置情報をフォアグラウンドページにコールバックし、コードで使用したい

this.setData({
    
    
          locInfo:res
        })

コールバックを実装できません。
これは、成功するとクロージャが返されるため、ステートメントの行を追加する必要があるためです。

const that = this;

次に、以下を使用します

that.setData({
    
    
          locInfo:res
        })

あなたはコールバックを実現することができます
ここに画像の説明を挿入