微信小程序百度地圖API移動(dòng)選點(diǎn)

本文首發(fā)微信小程序百度地圖API移動(dòng)選點(diǎn)
因?yàn)闃I(yè)務(wù)需要使用百度地圖API，參考一位大佬編寫騰訊API的思路和方法，改造成百度地圖API移動(dòng)選點(diǎn)。

思路：

wxml前端部分就不改了，用用大佬的。

微信地圖API獲取當(dāng)前位置經(jīng)緯度信息->百度地圖API逆地址解析方法,獲取當(dāng)前位置名稱,省市區(qū)等信息->setData

mapChange函數(shù)監(jiān)聽地圖移動(dòng)->設(shè)置一個(gè)定時(shí)器達(dá)到輪詢的目的，設(shè)置isGet參數(shù)判斷onLoad中的wx.getlocation是否執(zhí)行完。->nearby_search以當(dāng)前的地址名稱為搜索關(guān)鍵字,帶上經(jīng)緯度進(jìn)行POI檢索獲取附近地址列表

注意：頁面初始化時(shí)會(huì)因?yàn)閟cale改變觸發(fā)一次mapChange函數(shù)，由于JS單線程的特性，頁面初始化與page初始化時(shí)同時(shí)進(jìn)行的，如果先執(zhí)行wx.getlocation那沒有問題，執(zhí)行完給經(jīng)緯度賦值了，mapChange可以正常執(zhí)行，如果mapChange先執(zhí)行，那么此時(shí)經(jīng)緯度沒有初始值為空，mapChange返回的經(jīng)緯度信息也為空，導(dǎo)致獲取附近地址信息也為空。也可以使用getLocation中也執(zhí)行一次獲取附近地址信息的函數(shù)，但是這樣會(huì)多調(diào)用一次API，調(diào)用API還是挺耗時(shí)。

getsuggest根據(jù)用戶在輸入框輸入的關(guān)鍵字進(jìn)行POI熱詞檢索，搜索當(dāng)前城市的熱詞列表。

這三個(gè)是主要功能，其他的關(guān)于選擇省市區(qū)三級(jí)聯(lián)動(dòng)的部分，由于百度地圖API沒有提供完整的省市區(qū)縣列表（可能有是我沒找到），我也懶得封裝了，就閹割掉了。

代碼

貼一下關(guān)鍵的JS部分的代碼，詳細(xì)代碼查看Github，記得在app.js填寫的你的百度地圖調(diào)用密匙ak

import bmap from '../../utils/bmap-wx'; import '../../utils/util' let app = getApp(); let BMap = new bmap.BMapWX({ak: app.globalData.ak, }); Page({data: {addListShow: false,addressName: '',currentRegion: {province: '選擇城市',city: '選擇城市',district: '選擇城市',},isGet: false,latitude: '',longitude: '',centerData: {},nearList: [],selectedId: 0,},onLoad: function () {let that = this;let fail = function (data) {console.log(data)};let success = function (data) {// console.log(data);let wxMarkerData = data.wxMarkerData;that.setData({isGet: true,addressName: wxMarkerData[0].address,currentRegion: data.originalData.result.addressComponent,centerData: wxMarkerData,latitude: wxMarkerData[0].latitude,longitude: wxMarkerData[0].longitude});}that.mapCtx = wx.createMapContext('myMap')//微信API定位,獲取當(dāng)前位置經(jīng)緯度wx.getLocation({type: 'wgs84',success(res) {//console.log(res)BMap.regeocoding({location: res.latitude + ',' + res.longitude,fail: fail,success: success,});},fail(err) {//console.log(err)wx.hideLoading({});wx.showToast({title: '定位失敗',icon: 'none',duration: 1500})setTimeout(function () {wx.navigateBack({delta: 1})}, 1500)}})},onReady: function () {},//監(jiān)聽拖動(dòng)地圖，拖動(dòng)結(jié)束根據(jù)中心點(diǎn)更新頁面mapChange: function (e) {let that = this;let fail = function (data) {console.log(data)};let success = function (data) {let wxMarkerData = data.wxMarkerData[0];// console.log(wxMarkerData);that.setData({addressName: wxMarkerData.address,currentRegion: data.originalData.result.addressComponent,});let location = wxMarkerData.latitude + ',' + wxMarkerData.longitude;that.nearby_search(wxMarkerData.address, location);};//&& (e.causedBy == 'scale' || e.causedBy == 'drag')if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {/*用一個(gè)輪詢判斷getlocation是否執(zhí)行完,保證定位完再執(zhí)行mapchange,主要是解決map組件初始化時(shí)會(huì)因?yàn)閟cale改變觸發(fā)一次當(dāng)前函數(shù) */let i = setInterval(function () {let {isGet} = that.data;if (isGet) {clearInterval(i);//先調(diào)用微信組件獲取地圖中心點(diǎn)位置經(jīng)緯度that.mapCtx.getCenterLocation({success: function (res) {// console.log(res)that.setData({nearList: [],latitude: res.latitude,longitude: res.longitude,});//百度逆地址解析,將經(jīng)緯度轉(zhuǎn)換為地址信息BMap.regeocoding({location: res.latitude + ',' + res.longitude,fail: fail,success: success,});}});}}, 500)}},//重新定位reload: function () {this.onLoad();},onShow: function () {},// 根據(jù)關(guān)鍵詞搜索附近位置nearby_search: function (addressName, location) {let that = this;/*發(fā)起POI檢索請(qǐng)求,搜索當(dāng)前位置附近地址信息如果不知道參數(shù)可以通過ctrl+鼠標(biāo)左鍵進(jìn)入類內(nèi)部查看方法 */BMap.search({"query": addressName || '房地產(chǎn)',location: location,page_size: 20,page_index: 1,success: function (res) {// console.log(res);let sug = [];let wxMarkerData = res.wxMarkerData;// console.log(wxMarkerData)for (let i of wxMarkerData) {// console.log(i)sug.push({ // 獲取返回結(jié)果，放到sug數(shù)組中title: i.title,id: i.id,addr: i.address,latitude: i.latitude,longitude: i.longitude});}if (sug.length > 0) {that.setData({selectedId: 0,centerData: sug[0],nearList: sug,});}},fail(err) {console.log(err)wx.hideLoading({});wx.showToast({title: '獲取附近地址信息失敗',icon: 'none',duration: 1500})setTimeout(function () {wx.navigateBack({delta: 1})}, 1500)},});},//顯示搜索列表showAddList: function () {this.setData({addListShow: true})},//根據(jù)關(guān)鍵詞搜索匹配位置getsuggest: function (ev) {let that = this;that.setData({addListShow: true})let keyWold = ev.detail.value.trim(),{currentRegion} = that.data,searchCity = currentRegion.city;if (keyWold != "") {/* 根據(jù)輸入的關(guān)鍵字,在當(dāng)前城市搜索關(guān)鍵字地址信息 */BMap.suggestion({query: keyWold,region: searchCity, //市city_limit: true,// 搜索結(jié)果處理success: res => {let newList = res.result.filter(item => {return item.location;});// console.log(newList)that.setData({nearList: newList,});},fail(err) {console.log(err)}});} else {if (!that.data.addListShow) {that.setData({addListShow: true})}}},//點(diǎn)擊選擇地圖下方列表某項(xiàng)chooseCenter: function (e) {let that = this;let id = e.currentTarget.id;let nearList = that.data.nearList;that.setData({selectedId: id,centerData: nearList[id],latitude: nearList[id].latitude,longitude: nearList[id].longitude,});},//點(diǎn)擊選擇搜索結(jié)果backfill: function (e) {let that = this;let id = e.currentTarget.id;let nearList = that.data.nearList;that.setData({selectedId: id,centerData: nearList[id],addListShow: false,latitude: nearList[id].latitude,longitude: nearList[id].longitude});// 選擇完返回地圖頁面// let location = nearList[id].latitude + ',' + nearList[id].longitude;// that.nearby_search(nearList[id].title, location);// console.log(that.data.centerData)//選擇完返回上一頁wx.navigateBack({delta: 1})},//返回上一頁或關(guān)閉搜索頁面back1: function () {wx.navigateBack({delta: 1})// if (this.data.addListShow) {// this.setData({// addListShow: false// })// }//返回上一頁// else {// wx.navigateBack({// delta: 1// })// }},//確認(rèn)選擇地址selectedOk: function () {console.log(this.data.centerData)} })

Reference

微信小程序——打開地圖 選擇位置 完整功能實(shí)現(xiàn)代碼(定位，檢索周邊，可移動(dòng)選點(diǎn)，可搜索，騰訊地圖API)

代碼GitHub——微信小程序百度地圖API移動(dòng)選點(diǎn)

總結(jié)

以上是生活随笔為你收集整理的微信小程序百度地图API移动选点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。