微信小程序百度地圖API移動選點

本文首發微信小程序百度地圖API移動選點
因為業務需要使用百度地圖API，參考一位大佬編寫騰訊API的思路和方法，改造成百度地圖API移動選點。

思路：

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

微信地圖API獲取當前位置經緯度信息->百度地圖API逆地址解析方法,獲取當前位置名稱,省市區等信息->setData

mapChange函數監聽地圖移動->設置一個定時器達到輪詢的目的，設置isGet參數判斷onLoad中的wx.getlocation是否執行完。->nearby_search以當前的地址名稱為搜索關鍵字,帶上經緯度進行POI檢索獲取附近地址列表

注意：頁面初始化時會因為scale改變觸發一次mapChange函數，由于JS單線程的特性，頁面初始化與page初始化時同時進行的，如果先執行wx.getlocation那沒有問題，執行完給經緯度賦值了，mapChange可以正常執行，如果mapChange先執行，那么此時經緯度沒有初始值為空，mapChange返回的經緯度信息也為空，導致獲取附近地址信息也為空。也可以使用getLocation中也執行一次獲取附近地址信息的函數，但是這樣會多調用一次API，調用API還是挺耗時。

getsuggest根據用戶在輸入框輸入的關鍵字進行POI熱詞檢索，搜索當前城市的熱詞列表。

這三個是主要功能，其他的關于選擇省市區三級聯動的部分，由于百度地圖API沒有提供完整的省市區縣列表（可能有是我沒找到），我也懶得封裝了，就閹割掉了。

代碼

貼一下關鍵的JS部分的代碼，詳細代碼查看Github，記得在app.js填寫的你的百度地圖調用密匙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定位,獲取當前位置經緯度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 () {},//監聽拖動地圖，拖動結束根據中心點更新頁面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')) {/*用一個輪詢判斷getlocation是否執行完,保證定位完再執行mapchange,主要是解決map組件初始化時會因為scale改變觸發一次當前函數 */let i = setInterval(function () {let {isGet} = that.data;if (isGet) {clearInterval(i);//先調用微信組件獲取地圖中心點位置經緯度that.mapCtx.getCenterLocation({success: function (res) {// console.log(res)that.setData({nearList: [],latitude: res.latitude,longitude: res.longitude,});//百度逆地址解析,將經緯度轉換為地址信息BMap.regeocoding({location: res.latitude + ',' + res.longitude,fail: fail,success: success,});}});}}, 500)}},//重新定位reload: function () {this.onLoad();},onShow: function () {},// 根據關鍵詞搜索附近位置nearby_search: function (addressName, location) {let that = this;/*發起POI檢索請求,搜索當前位置附近地址信息如果不知道參數可以通過ctrl+鼠標左鍵進入類內部查看方法 */BMap.search({"query": addressName || '房地產',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({ // 獲取返回結果，放到sug數組中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})},//根據關鍵詞搜索匹配位置getsuggest: function (ev) {let that = this;that.setData({addListShow: true})let keyWold = ev.detail.value.trim(),{currentRegion} = that.data,searchCity = currentRegion.city;if (keyWold != "") {/* 根據輸入的關鍵字,在當前城市搜索關鍵字地址信息 */BMap.suggestion({query: keyWold,region: searchCity, //市city_limit: true,// 搜索結果處理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})}}},//點擊選擇地圖下方列表某項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,});},//點擊選擇搜索結果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})},//返回上一頁或關閉搜索頁面back1: function () {wx.navigateBack({delta: 1})// if (this.data.addListShow) {// this.setData({// addListShow: false// })// }//返回上一頁// else {// wx.navigateBack({// delta: 1// })// }},//確認選擇地址selectedOk: function () {console.log(this.data.centerData)} })

Reference

微信小程序——打開地圖 選擇位置 完整功能實現代碼(定位，檢索周邊，可移動選點，可搜索，騰訊地圖API)

代碼GitHub——微信小程序百度地圖API移動選點

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。