最近在做小程序端的 地圖附近列表數(shù)據(jù)展示的功能曹铃，這一塊我用了3個核心的功能：
微信小程序的map組件+微信小程序的地圖API+騰訊地圖的 微信小程序JavaScript SDK妓局。
微信小程序的map組件實現(xiàn)了地圖的加載顯示萌焰。
微信小程序的地圖API實現(xiàn)了拖拽哺眯、縮放地圖后，地圖中心點的獲取扒俯。
騰訊地圖的 微信小程序JavaScript SDK奶卓。實現(xiàn)了根據(jù)當前位置的經(jīng)緯度或者地圖中心點位置的經(jīng)緯度 反編譯附近的地理位置的詳情信息。
實現(xiàn)的過程中遇到了不少坑撼玄，這里列舉一下夺姑，避免像我一樣踩坑。
這一塊我想具體實現(xiàn)的功能是：通過拖拽地圖掌猛，獲取拖拽后的地圖中心點盏浙，然后獲取地圖中心點附近的前4條位置信息展示到列表上。
所以我就開始理了一下邏輯：首先通過
bindregionchange事件監(jiān)聽地圖的拖拽荔茬，然后監(jiān)聽到之后废膘，利用微信小程序地圖API的getCenterLocation函數(shù)獲取當前地圖中心的經(jīng)緯度，最后利用騰訊地圖的reverseGeocoder函數(shù)實現(xiàn)獲取地圖中心點附近的前4條位置慕蔚。代碼寫好了之后丐黄，發(fā)現(xiàn)bindregionchange頻繁調(diào)用，近而引起后續(xù)的邏輯多次執(zhí)行(
getCenterLocation函數(shù)執(zhí)行多次孔飒、reverseGeocoder函數(shù)執(zhí)行多次)孵稽。問題是出現(xiàn)在bindregionchange頻繁調(diào)用上许起。后來仔細想了一下，之前在做app端的地圖功能時(使用的是百度地圖JS)菩鲜，發(fā)現(xiàn)了一個問題,監(jiān)聽地圖的移動事件
map.addEventListener('moveend', mapMoveend);// 移動結束監(jiān)聽后园细，縮放地圖或者縮放同時移動地圖，會?有兩次的moveend的回調(diào)接校，解決辦法是在moveend回調(diào)里面判斷地圖前后縮放如果不一樣就不再往下執(zhí)行移動的移動if (map.getZoom() != 14) return;猛频，保證了moveend只執(zhí)行移動的邏輯。(縮放有縮放的邏輯蛛勉，也有相應的事件監(jiān)聽鹿寻，app端的不再贅述了)。
針對上面的分析诽凌，解決辦法如下
map組件上添加了 bindregionchange事件毡熏，該事件的作用是視野發(fā)生變化時觸發(fā)，也就是說當你縮放地圖(scale)侣诵、拖拽地圖(drag)痢法、旋轉(zhuǎn)地圖(rotate)等一些操作的時候會觸發(fā)。因此在bindregionchange函數(shù)中寫如下代碼即可解決問題
// 視野發(fā)生變化時觸發(fā)
bindregionchangeClick: function (e) {
console.log("地圖位置改變了" + JSON.stringify(e));
if (e.causedBy == "scale" || e.causedBy == "drag") {
// 獲取地圖位置改變后的中心點經(jīng)緯度以及獲取中心點附近的位置信息
this.getCenterLocationFunc();
}else{
console.log("其余事件不執(zhí)行邏輯");
}
},
整體效果如下
