微信小程序开发中,在利用百度地图逆地址解释(从经纬度转换为地址信息)时,需要等待百度api函数regeocoding返回数据才能执行下一步操作,否则会出现数据不全的情况。经过多次摸索,终于实现异步操作变成同步调用。实际执行中,必须是async 和await同步出现,而 await 调用的函数中必须包含 Promise,否则同步调用操作无效。
以下为.js文件和.wxml文件代码片段,仅供参考。
JavaScript
async openMap() {
// 通过 , 号分割字符串
var arrLongLa = new Array()
this.setData({
JWDValue: this.data.JWDValue.replace(/,/g, ",")//将‘,’替换为‘,’
});
arrLongLa = this.data.JWDValue.toString().split(",")//分离经纬度
var longitude = Number(arrLongLa[0])
var latitude = Number(arrLongLa[1])
if (this.data.arrayID == 0) {
var t = gps.wgs84ToGcj02(latitude, longitude)
latitude = t.latitude
longitude = t.longitude
}
console.log(longitude, latitude);
//需要等待getBDRegeocoding返回数据,才能执行下一步,否则数据将会看不到
await this.getBDRegeocoding(latitude, longitude).then((res) => {
this.setData({
address: '地址:' + res.address,
desc: '' + res.desc,
});//then后面的(res)为成功时返回的结果;下面的(err)反失败时返回的结果
}, (err) => {
wx.showToast({ title: err, })
})
wx.openLocation({
latitude: latitude, // gcj02 纬度,范围为-90~90,负数表示南纬
longitude: longitude, // gcj02 经度,范围为-180~180,负数表示西经
scale: 15, // 缩放比例
name: this.data.desc,
address: this.data.address
})
this.SaveHistoryrecords()//保存历史记录
},
getBDRegeocoding(latitude, longitude) {
return new Promise(function (resolve, reject) {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: 'SFTkQNedDAsxpw7nztSnCGDN6Mn6e9PC'
});
// 发起regeocoding检索请求
BMap.regeocoding({
location: latitude + ',' + longitude,
coordtype: 'wgs84ll',
fail: function (res) {
reject(res)
},
success: function (data) {
// console.log('反查后地址', data);
resolve(data.wxMarkerData[0])//请求的数据直接返回,不做任何处理
},
});
})
},
Markup
<view class="card-modular " >
<view class="title">坐标导航</view>
<view class="card-wrap">
<view class="item">
<view class="JWDtext"> 坐标系:
<picker bindchange="bindPickerChange" value="{{arrayID}}" range="{{array}}">
<view class="picker">
{{array[arrayID]}}
</view>
</picker>
</view>
<view class="JWDtext">
<input type='text' class="jdwtxt" maxlength="30" bindinput="JWDChange" value="{{JWDValue}}"></input>
<view bindtap="openMap">
<image class="icon" src="/images/navigate.png"></image>
</view>
</view>
<view class="JWDtext">
<text class="text-gray">1.经度在前,维度在后(格式:116.41,39.92 )\n\t2.支持 WGS-84大地坐标系、GCJ-02 中国坐标系</text>
</view>
<view class="JWDtext">
<view >历史记录</view>
</view>
<view class="picker" bindtap="openHistory1"><text>{{History1}}</text> </view>
<view class="picker" bindtap="openHistory2"><text>{{History2}}</text> </view>
<view class="picker" bindtap="openHistory3"><text>{{History3}}</text> </view>
</view>
</view>
</view>
发表评论