微信小程序之移动地图获取坐标和位置信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之移动地图获取坐标和位置信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、实现效果演示

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

小程序map搜索内容并返回搜索目的地的坐标,怎么实现,微信小程序,微信小程序,小程序

二、前端代码实现

<view class="mapshow">

  <map class="mapUI" id="myMap" scale="13" bindmarkertap="bindmarkertap" data-index="{{index}}" show-location markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" bindregiοnchange="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("其余事件不执行逻辑");

    }

  },文章来源地址https://www.toymoban.com/news/detail-776711.html

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,

        });

      }

    })

  },