百度地图逆地址解释API进行promise封装,实现regeocoding同步调用

原创 pcp44  2023-10-24 17:01:05  阅读 439 次 评论 0 条
摘要:

微信小程序开发中,在利用百度地图逆地址解释(从经纬度转换为地址信息)时,需要等待百度api函数regeocoding返回数据才能执行下一步操作,否则会出现数据不全的情况。经过多次摸索,终于实现异步操作变成同步调用。

微信小程序开发中,在利用百度地图逆地址解释(从经纬度转换为地址信息)时,需要等待百度api函数regeocoding返回数据才能执行下一步操作,否则会出现数据不全的情况。经过多次摸索,终于实现异步操作变成同步调用。实际执行中,必须是asyncawait同步出现,而 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>

微信截图_20231024161215.png

本文地址:https://b.gx86.cn/?id=89
版权声明:本文为原创文章,版权归 pcp44 所有,欢迎分享本文,转载请保留出处!如有侵权,请留言或邮件告知,万分感谢。

发表评论


表情

还没有留言,还不快点抢沙发?