一、實現(xiàn)效果演示
其實就是在小程序上移動，然后實時的獲取地址中心點的坐標(biāo)信息，然后通過坐標(biāo)數(shù)據(jù)信息獲取地址信息的過程；
?二、前端代碼實現(xiàn)
<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>
????注：您可移動地圖，選擇企業(yè)的地址獲取坐標(biāo)信息
??</view>
</view>
<view?class="tipInforyinhuan">
??<view?class="tipInforTop">
????<view?class="inputTip">
??????企業(yè)地址信息
????</view>
????<view?class="zoomtop">
??????<view?class="loginInput">
????????<view?class="loginTip"?style="display:?flex;flex-direction:?row;margin-top:?5rpx;">
??????????<view>
????????????企業(yè)地址
??????????</view>
??????????<view?style="color:?#f00;font-weight:?bold;font-size:?25rpx;text-align:?center;align-items:?center;">
????????????(*請將以下位置信息修改為企業(yè)的詳細(xì)地址)
??????????</view>
????????</view>
????????<input?type="text"?class="inputInfor"?placeholder="請輸入地址信息"?bindinput="passwordInput"?value="{{myaddress}}"?/>
????????<view?class="lineView"></view>
????????<view?class="loginTip"?style="margin-top:?25rpx;">企業(yè)經(jīng)緯度</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">
????確認(rèn)提交位置信息
??</view>
</view>
說明：
1：這塊的代碼其實就是上面是一個map地圖控件，下面是一個顯示的view控件而已；
2：bindregionchange這個屬性就是監(jiān)聽位置的變化方法
三、js邏輯實現(xiàn)
1：實時監(jiān)聽地圖的位置變化
?//?視野發(fā)生變化時觸發(fā)
??bindregionchange:?function?(e)?{
????console.log("實時獲取地圖位置坐標(biāo)數(shù)據(jù)信息",?e.detail.centerLocation);??? ? ?
???//以下代碼對坐標(biāo)數(shù)據(jù)進行地址轉(zhuǎn)換
????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數(shù)據(jù)信息
??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,
????})文章來源：http://www.zghlxwxcb.cn/news/detail-776711.html
????if?(e.causedBy?==?"scale"?||?e.causedBy?==?"drag")?{
??????//?獲取地圖位置改變后的中心點經(jīng)緯度以及獲取中心點附近的位置信息
??????//?this.getCenterLocationFunc();
????}?else?{
??????console.log("其余事件不執(zhí)行邏輯");
????}
??},文章來源地址http://www.zghlxwxcb.cn/news/detail-776711.html
2：對坐標(biāo)數(shù)據(jù)進行地址轉(zhuǎn)換
????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：轉(zhuǎn)換以及保存地址數(shù)據(jù)
??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,
????????});
??????}
????})
??},
到了這里，關(guān)于微信小程序之移動地圖獲取坐標(biāo)和位置信息的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
