微信小程序之移动地图获取坐标和位置信息

一、实现效果演示

其实就是在小程序上移动，然后实时的获取地址中心点的坐标信息，然后通过坐标数据信息获取地址信息的过程；

 二、前端代码实现

<view class="mapshow">

  <map class="mapUI" id="myMap" scale="13" bindmarkertap="bindmarkertap" data-index="{{index}}" show-location markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" bindregionchange="bindregionchange" show-location></map>

</view>

<view class="resultInforTip" style="margin-left: 25rpx;">

  <view>

    注：您可移动地图，选择企业的地址获取坐标信息

  </view>

</view>

<view class="tipInforyinhuan">

  <view class="tipInforTop">

    <view class="inputTip">

      企业地址信息

    </view>

    <view class="zoomtop">

      <view class="loginInput">

        <view class="loginTip" style="display: flex;flex-direction: row;margin-top: 5rpx;">

          <view>

            企业地址

          </view>

          <view style="color: #f00;font-weight: bold;font-size: 25rpx;text-align: center;align-items: center;">

            (*请将以下位置信息修改为企业的详细地址)

          </view>

        </view>

        <input type="text" class="inputInfor" placeholder="请输入地址信息" bindinput="passwordInput" value="{{myaddress}}" />

        <view class="lineView"></view>

        <view class="loginTip" style="margin-top: 25rpx;">企业经纬度</view>

        <view class="inputInfor">

          <view class="totalInfor">{{mylatitude}},{{mylongitude}}</view>

        </view>

        <view class="lineView"></view>

      </view>

    </view>

  </view>

</view>

<view class="btninfor" style="padding-bottom: 30rpx;">

  <view class="subButton" hover-class='view-box-btn-hover' hover-start-time='5' bindtap="loginListener">

    确认提交位置信息

  </view>

</view>

说明：

1：这块的代码其实就是上面是一个map地图控件，下面是一个显示的view控件而已；

2：bindregionchange这个属性就是监听位置的变化方法

三、js逻辑实现

1：实时监听地图的位置变化

 // 视野发生变化时触发

  bindregionchange: function (e) {

    console.log("实时获取地图位置坐标数据信息", e.detail.centerLocation);       

   //以下代码对坐标数据进行地址转换

    var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + e.detail.centerLocation.latitude + ',' +

      e.detail.centerLocation.longitude + "&key="您申请的key"&get_poi=1";

    this.sendRequest(qqMapApi);

   //以下下代码是给地图添加一个marker数据信息

  let mapAddress = [];

    mapAddress.push({

      id: 1001,

      // id: this.data.companyAddress[i].id,

      latitude: e.detail.centerLocation.latitude,

      longitude: e.detail.centerLocation.longitude,

      iconPath: '/pages/image/markerimage.png',

      width: '34px',

      height: '34px',

      content: "111",

    });

    this.setData({

      mylatitude: e.detail.centerLocation.latitude,

      mylongitude: e.detail.centerLocation.longitude,

      markers: mapAddress,

    })

    if (e.causedBy == "scale" || e.causedBy == "drag") {

      // 获取地图位置改变后的中心点经纬度以及获取中心点附近的位置信息

      // this.getCenterLocationFunc();

    } else {

      console.log("其余事件不执行逻辑");

    }

  },

2：对坐标数据进行地址转换

    var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + e.detail.centerLocation.latitude + ',' +

      e.detail.centerLocation.longitude + "&key="您申请的key"&get_poi=1";

    this.sendRequest(qqMapApi);

3：转换以及保存地址数据

  sendRequest: function (qqMapApi) {

    const that = this

    wx.request({

      url: qqMapApi,

      header: {

        'Content-Type': 'application/json'

      },

      data: {},

      method: 'GET',

      success: (res) => {

        console.log(res.data.result.address)

        that.setData({

          myaddress: res.data.result.address,

        });

      }

    })

  },