【WeChat ミニプログラム】現在のポジションを取得するには?この記事では、逆アドレス解析と uni-app を使用して目的を達成します。

目次

序文

結果を示す

1. Tencent Location Services で WeChat アプレット JavaScript SDK を構成する

2. uni-app を使用して測位の経度と緯度を取得します

3. 正確な位置を取得するための逆アドレス解決

4. ヒント


序文

結果を示す

1. Tencent Location Services で WeChat アプレット JavaScript SDK を構成する

ブラウザで Tencent Location Services を検索し、公式 Web サイトを見つけ、WeChat またはその他のアカウントで登録してログインし、ログイン後に以下のように操作します。

クリックすると、以下に示すように、赤いボックスに操作手順が表示されます。

1番目と2番目のステップは、主に秘密鍵の申請とサービスの設定です. マイアプリケーションを直接クリックしてジャンプし、次の図のように操作できます. 

作成が成功すると、次の写真が表示されます 

[キーの追加] をクリックし、構成します 

構成が成功すると、キーが取得されます 

3 番目のステップは、WeChat アプレットJavaScriptSDK v1.1    JavaScriptSDK v1.2の 1 つをダウンロード し、ファイルを解凍してプロジェクトに入れ、共通コンポーネントに入れます。

 4 番目の手順は無視して、5 番目の手順で、配置を表示したいページにファイルをインポートし、適用した Key を onLoad ライフサイクルに導入します。

var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');

	this.qqmapsdk = new QQMapWX({
						key: '3SUBZ-W5BCQ-FLM5G-GYOPG-D523V-DUFNH'
					});

 2. uni-app を使用して測位の経度と緯度を取得します

uni-app の API で場所を見つける

 次のコードをマウントされたライフサイクルに挿入して、緯度と経度を取得します

uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('当前位置的经度:' + res.longitude);
		console.log('当前位置的纬度:' + res.latitude);
	}
});

 ここで、manifest.json のソース ビューでアクセス許可を構成するためのコードを追加する必要もあります。

 "permission" : {
            "scope.userLocation" : {
                "desc" : "获取当前定位"
            }
        }

 

3. 正確な位置を取得するための逆アドレス解決

qqmapsdk.reverseGeocoder のメソッドを呼び出し、属性 location で緯度と経度を呼び出します (ここでは gcj02 を使用する必要があることに注意してください)。

属性 success、fail、および complete のコールバック パラメータを使用して呼び出し結果を受け取ります。成功には 2 つのコールバック パラメータを使用できます。最初のパラメータは呼び出し結果を受け取り、2 番目のパラメータは返された処理済みデータを制御します (オプション パラメータ)。 : 成功 :function(res,data)

 

 address は、アドレスを受け取るためにそれ自体が空として定義され、req は次の内容を持ちます。

 場所が取得されている限り、アドレスは req.result.address にすることができます

mounted() {
		uni.getLocation({
		type: 'gcj02',
		highAccuracyExpireTime: 100,
		success: (res => {
				this.qqmapsdk.reverseGeocoder({
				location: {
					latitude: res.latitude,
					longitude: res.longitude
				},
				success:(req=>{
					this.address = req.result.address
					console.log(this.address);
				})
			})
		})
	});
},

 最後に、ページにアドレスを表示できます

 コード部分の highAccuracyExpireTime: 100 は、高精度測位タイムアウト (ms) であり、指定された時間内で最も高い精度を返します. 3000ms 以上の値は、高精度測位に有効であり、記述の可否を指定できます.

4. ヒント

配置効果が現れない場合は、デバッグ ベース ライブラリのバージョンを下げる必要があります。

閉会の辞:

以上が今回の共有内容です。ご不明な点がございましたら、個人的にメッセージをお送りください。

おすすめ

転載: blog.csdn.net/yzq0820/article/details/126920342