微信小程序开发中,在利用百度地图逆地址解释(从经纬度转换为地址信息)时,需要等待百度api函数regeocoding返回数据才能执行下一步操作,否则会出现数据不全的情况。经过多次摸索,终于实现异步操作变成同步调用。实际执行中,必须是async 和await同步出现,而 await 调用的函数中必须包含 Promise,否则同步调用操作无效。
以下为.js文件和.wxml文件代码片段,仅供参考。
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])//请求的数据直接返回,不做任何处理 }, }); }) },
<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>
发表评论