1.Tencentマップキーを取得します。
1. Tencent マップ API を見つける
登録してログインした後、「開発ドキュメント」をクリックし、「WeChat ミニ プログラム JavaScript SDK」を選択します。
入力後、Hello world! の手順に従ってください。
2. キーを申請する
上記の最初のステップでアプリケーション キーをクリックし、自分のアプリケーションを入力し、作成アプリケーションに名前と作成の種類を入力します。
作成が成功したら、「キーの追加」をクリックして名前と説明を入力し、WeChat アプレットを選択し、独自のアプレットの APPID を入力して、「OK」をクリックします。
次に、アプレット内の設定
1. ミニプログラムアカウントがない場合
アプレット登録アドレスに登録し、開発管理で開発設定を見つけると、APP IDが表示されます
開発設定 -> 「サーバー ドメイン名」を設定し、正当なドメイン名を要求し、https://apis.map.qq.com を追加します。
3. コードの実装
WeChat ミニ プログラム JavaScriptSDK、WeChat ミニ プログラムJavaScriptSDK v1.2をダウンロード
1. 新しい uniapp プロジェクトを作成します
ディレクトリ構造。ダウンロードした JavaScriptSDK v1.2 にファイルをインポートするための新しいユーティリティを作成します。
2. プロジェクト内の設定
開発プロセス中に、unpackage>>dist>>dev>>mp-weixin>>app.json に次の構成を追加する必要があります。
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
manifest.json のソース ビューで構成: appid と地理的位置を構成します。
"mp-weixin": {
/* 小程序特有相关 */
"appid": "", //需要配置appid
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
3. ページ固有のコード
<template>
<view class="">
<view class="ditu">
<map style="width:100%;height:100%;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="marker"
@markertap="toMap()">
<!--此处踩坑问题1：
@markertap 是点击地图上的标记点时 触发打开地图。
@tap 是点击地图整体的时候 触发打开地图。
-->
</map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.542, //纬度
longitude: 116.2529, //经度
scale: 14, //地图缩放程度
}
},
}
</script>
<style scoped>
.ditu {
width: 100%;
height: 565rpx;
}
</style>
4. 以下の図に示すように、開発が完了しました
4. 現在地の緯度経度を取得する
1. ページ固有のコード
<template>
<view class="">
<view class="ditu">
<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale"
:markers="marker" @markertap="toMap()">
</map>
</view>
</view>
</template>
<script>
import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
export default {
data() {
return {
latitude: 39.542, //纬度
longitude: 116.2529, //经度
scale: 14, //地图缩放程度
}
},
methods: {
getLocation(){
const _this = this
uni.authorize({
scope: 'scope.userLocation',
success() {
let location = {
longitude: _this.longitude,
latitude: _this.latitude,
province: "",
city: "",
area: "",
street: "",
address: "",
};
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function(res) {
uni.setStorageSync('latitude', _this.latitude)
uni.setStorageSync('longitude', _this.longitude)
location.longitude = res.longitude;
location.latitude = res.latitude;
const qqmapsdk = new QQMapWX({
key: 'PBZBZ-74CE3-7ND3P-3OVWM-HDZIT-QRF23' //申请的key
});
qqmapsdk.reverseGeocoder({
location,
success: function(res) {
let info = res.result;
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
console.log(location);
},
});
},
fail: function(err) {
uni.showToast({
title: '获取定位失败',
icon: 'none'
})
}
})
}
})
},
},
onLoad() {
this.getLocation() //获取当前定位
},
}
</script>
<style scoped>
.ditu {
width: 100vw;
height: 565rpx;
}
</style>
2. エラー処理
直接実行すると下図のエラーが表示されます
**理由:** 2022 年 7 月以降、新しく開発されたアプレットがユーザーの位置情報を取得したい場合は、まず申請してから、app.json で設定してから使用する必要があります。
3. アプリケーションの許可
WeChat開発者ツールで権限を申請する
[開発] –> [開発管理] –> [インターフェイス設定] を選択し、ニーズとアプレットに適用する権限があるかどうかに応じて、対応するインターフェイスを適用します。
4. コード構成
現時点で設定が必要なインターフェースは以下の通りです（公式ドキュメント参照）
uniapp の unpackage > dist > dev > mp-weixin > app.json でコードを構成するだけです。
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"startLocationUpdateBackground",
"chooseAddress"
]
最後に、位置アドレスを取得できます
