小程式經緯度轉具體位置
阿新 • • 發佈：2022-03-25
前提工作：
1、需要準備微信小程式JavaScriptSDK檔案：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
2、註冊key ： https://lbs.qq.com/dev/console/application/mine
（1）、在我的應用中新增新的應用
（2）、新增應用後再 新增對應的Key
（3）、新增key 對應的配置（有兩種：一種是域名，一種是填寫IP地址）
（4）、最後在介面能看到Key
3、在js 中配置好key 就可以使用了。
4、在小程式中的app.json 配置一下,與pages 選項同級。
"permission": {
"scope.userLocation": {
"desc": "你的位置資訊將用於小程式位置介面的效果展示"
}
}5、小程式提供的 reverseGeocoder 方法還有更多的配置資訊，詳情檢視：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder
6、最後上程式碼，如有不足之處，請大家指出，謝謝。
檢視程式碼
<view class="container"> <view class="box play"> <view bindtap="GetsTheLocationet">點選獲取位置</view> </view> <view>{{message}}</view> </view>
檢視程式碼
.box{ width:400rpx; height:400rpx; display:flex; flex-direction: column; background-color:#0081ff; border-radius:1000rpx; color:white; font-weight: bold; text-align:center; /* box-shadow: 0rpx 8rpx 8rpx blue; */ box-shadow:0rpx 0rpx 14rpx blue; } .play{ display:flex; justify-content: center; align-content: center; }
檢視程式碼
var QQMapWX = require('./qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
key: '' // key必填
});
Page({
data:{
message:''
},
onLoad(){
},
GetsTheLocationet(){
const that = this
qqmapsdk.reverseGeocoder({
location: '', //獲取表單傳入的位置座標,不填預設當前位置,示例為string格式
success:function(res){
let message = res.result.formatted_addresses.recommend
that.setData({
message
})
}
})
}
})