劃實戰(zhàn))
簡介這份資源是面向微信小程序開發(fā)者的百度地圖 JavaScript API 接口包適合需要在社交、旅游、打車等場景中嵌入地理位置服務(wù)的初中級開發(fā)者。包內(nèi)共35個文件以js腳本、wxss樣式、json配置、wxml模板和png圖片為主壓縮包約28KB其中bmap-wx.js與bmap-wx.min.js為核心接口文件demo目錄提供了可直接參考的頁面示例README.md則給出基礎(chǔ)說明。已有88人學習下載。借助這套接口開發(fā)者可在小程序內(nèi)實現(xiàn)地圖展示、標記點與多邊形等覆蓋物添加、縮放移動、路徑規(guī)劃、地點檢索、駕車導航、公交查詢及周邊檢索并支持實時位置分享為社交與出行類應(yīng)用提供位置能力支撐。文件包命名中的master表明其為主版本穩(wěn)定性較好適合直接用于生產(chǎn)環(huán)境配合官方文檔與參數(shù)示例可幫助開發(fā)者快速上手并高效排查調(diào)用問題。1. 百度地圖微信小程序 JSAPI 到底解決什么問題很多團隊第一次在微信小程序里做地圖第一反應(yīng)是直接用微信原生的map組件。原生組件能顯示地圖、能打點、能畫線看起來夠用。但真到業(yè)務(wù)里問題就來了想按關(guān)鍵字搜周邊門店、想逆地理編碼把經(jīng)緯度換成中文地址、想算兩個點之間的步行路線、想畫一片多邊形區(qū)域做電子圍欄——這些原生組件都不直接給。于是就得自己接一套地圖服務(wù)而百度地圖微信小程序 JSAPI 就是干這個的它把百度地圖的檢索、逆地理、路線規(guī)劃、坐標轉(zhuǎn)換等能力封裝成能在小程序里直接調(diào)用的接口。這個標題指向的是一份 JSAPI 的接入包核心價值在于讓小程序開發(fā)者不用從零搭地圖后端就能拿到搜索、定位、算路這些能力。適合兩類人一類是剛接手小程序地圖需求、想快速跑通的新手另一類是已經(jīng)用了原生組件、但被檢索和算路卡住的熟手。下面按「先跑通、再調(diào)參、再避坑」的順序講清楚。2. 接入前的準備與最小可運行工程2.1 申請密鑰與配置合法域名百度地圖的接口調(diào)用都要帶一個 AKAccess Key這是身份憑證。申請流程在百度地圖開放平臺的控制臺完成創(chuàng)建應(yīng)用時選「微信小程序」類型填上小程序的 AppID平臺會生成對應(yīng)的 AK。這里有個容易忽略的點AK 是和小程序 AppID 綁定的換一個小程序就得重新申請不能混用。拿到 AK 之后還要在小程序后臺配置服務(wù)器域名。百度地圖的接口域名需要加進 request 合法域名列表否則真機上請求會被攔截。常見要加的有api.map.baidu.com和api.map.baidu.com下的路徑。開發(fā)階段可以在開發(fā)者工具里勾選「不校驗合法域名」但上線前必須配好不然線上直接白屏。提示AK 分瀏覽器端、服務(wù)端、小程序端幾種類型申請時選錯類型會導致接口返回權(quán)限錯誤這個坑后面避坑章節(jié)會細說。2.2 引入 JSAPI 文件與初始化這份 JSAPI 包通常是一個bmap-wx.js之類的文件把它放到小程序工程的utils或libs目錄下然后在頁面里 require 進來。初始化時傳入 AK創(chuàng)建一個 BMapWX 實例。// utils/bmap-wx.js 是引入的 JSAPI 文件 const BMapWX require(../../utils/bmap-wx.js); // 初始化ak 換成自己申請的值 const bmap new BMapWX({ ak: 你的小程序端AK }); Page({ data: { markers: [], address: }, onLoad() { // 頁面加載時做一次逆地理驗證 AK 是否可用 this.reverseGeocode(116.404, 39.915); }, reverseGeocode(lng, lat) { bmap.regeocoding({ location: ${lat},${lng}, // 注意順序是緯度在前 success: (res) { // res 里包含 address、business 等字段 this.setData({ address: res.originalData.result.formatted_address }); }, fail: (err) { console.error(逆地理失敗, err); } }); } });這段代碼做了三件事引入 JSAPI、用 AK 初始化實例、調(diào)用逆地理接口把經(jīng)緯度轉(zhuǎn)成地址。參數(shù)上location的格式是「緯度,經(jīng)度」順序反了會返回錯誤結(jié)果或空地址這是新手最常翻車的地方。success回調(diào)里的originalData是百度返回的原始結(jié)構(gòu)formatted_address是格式化后的地址字符串。跑通這一步說明 AK 和域名配置都沒問題可以往下做檢索和算路。3. 檢索、逆地理與路線規(guī)劃的落地寫法3.1 周邊檢索與關(guān)鍵字搜索的參數(shù)怎么設(shè)周邊檢索search和關(guān)鍵字搜索是地圖業(yè)務(wù)里用得最多的兩個接口。周邊檢索以某個中心點為核心按半徑找 POI關(guān)鍵字搜索則是在指定城市范圍內(nèi)按詞找。兩者的參數(shù)結(jié)構(gòu)類似但用途不同。// 周邊檢索找中心點 1000 米內(nèi)的咖啡店 bmap.search({ query: 咖啡, location: 39.915,116.404, // 緯度,經(jīng)度 radius: 1000, // 單位米最大一般 50000 page_num: 0, // 頁碼從 0 開始 page_size: 10, // 每頁條數(shù)最大 20 success: (res) { const pois res.originalData.results.map(item ({ name: item.name, address: item.address, lat: item.location.lat, lng: item.location.lng })); this.setData({ markers: pois }); }, fail: (err) console.error(err) });參數(shù)里radius是半徑單位米設(shè)太大返回結(jié)果會被截斷設(shè)太小又搜不到東西一般按業(yè)務(wù)場景給 500 到 3000。page_num從 0 開始翻頁時遞增但要注意百度對總頁數(shù)有限制深翻頁拿不到數(shù)據(jù)。page_size最大 20想一次多拿只能靠翻頁。返回的results數(shù)組里每條 POI 帶location對象里面是lat和lng直接可以喂給地圖組件的 markers。關(guān)鍵字搜索多一個region參數(shù)用來限定城市比如region: 北京。不傳 region 時結(jié)果可能跨城做本地生活類業(yè)務(wù)一定要傳。3.2 逆地理編碼與坐標轉(zhuǎn)換的配合逆地理編碼是把經(jīng)緯度換成地址前面已經(jīng)跑通。但這里有個坐標系問題必須講清楚百度地圖用的是 BD09 坐標系而微信小程序wx.getLocation默認返回的是 GCJ02 坐標系。兩者不轉(zhuǎn)換直接用位置會偏移幾百米這就是很多人說的「玄學偏移」。// 把微信拿到的 GCJ02 坐標轉(zhuǎn)成 BD09 bmap.translate({ from: gcj02, to: bd09, location: 39.915,116.404, success: (res) { // res.originalData.result 里是轉(zhuǎn)換后的坐標數(shù)組 const point res.originalData.result[0]; console.log(轉(zhuǎn)換后, point.y, point.x); // y 是緯度x 是經(jīng)度 }, fail: (err) console.error(err) });translate接口的from和to支持wgs84、gcj02、bd09三種坐標系互轉(zhuǎn)。注意返回結(jié)構(gòu)里y對應(yīng)緯度、x對應(yīng)經(jīng)度和常見的lat/lng命名不一樣取值時別搞反。實際業(yè)務(wù)里通常是先用wx.getLocation拿到 GCJ02 坐標轉(zhuǎn)成 BD09 后再去調(diào)檢索或逆地理這樣結(jié)果才準。3.3 路線規(guī)劃接口的調(diào)用與結(jié)果解析路線規(guī)劃分駕車、步行、騎行、公交幾種接口名不同但參數(shù)結(jié)構(gòu)接近。以駕車為例傳入起點和終點坐標返回的是分段路徑和總距離、總時長。bmap.driving({ origin: 39.915,116.404, // 起點 緯度,經(jīng)度 destination: 39.925,116.424, // 終點 success: (res) { const route res.originalData.result.routes[0]; console.log(總距離(米), route.distance); console.log(總耗時(秒), route.duration); // route.steps 是分段導航信息 route.steps.forEach(step { console.log(step.instructions); // 每段文字指引 }); }, fail: (err) console.error(err) });返回的routes是數(shù)組一般取第一條。distance單位米duration單位秒展示時要自己換算成公里和分鐘。steps里每段帶instructions文字指引和path坐標串畫線時把 path 解析出來喂給 polyline 即可。公交規(guī)劃返回結(jié)構(gòu)更復雜帶換乘信息解析時要多判空。4. 避坑與常見問題排查4.1 AK 類型選錯導致接口全部報錯現(xiàn)象所有接口都返回權(quán)限錯誤或狀態(tài)碼非 0控制臺提示 AK 無效。原因是申請時選了瀏覽器端或服務(wù)端類型而小程序端必須用「微信小程序」類型的 AK。解決方式是回控制臺重新創(chuàng)建應(yīng)用類型選對把新 AK 換進初始化代碼。這個坑很隱蔽因為 AK 字符串本身看起來沒問題只有類型不對。4.2 坐標系沒轉(zhuǎn)換導致位置偏移幾百米現(xiàn)象地圖上打的點和實際位置對不上偏移量穩(wěn)定在幾百米。原因是微信定位返回 GCJ02百度接口吃 BD09中間少了轉(zhuǎn)換。解決辦法是在拿到定位坐標后先調(diào)translate轉(zhuǎn)成 BD09再用于檢索、逆地理和打點。判斷是否偏移可以拿一個已知地標的坐標對比偏幾百米基本就是坐標系問題。4.3 真機請求被攔截而開發(fā)者工具正?，F(xiàn)象開發(fā)者工具里一切正常真機上接口全部失敗。原因是沒在小程序后臺配置 request 合法域名工具里勾了「不校驗合法域名」所以看不出來。解決方式是登錄小程序后臺在開發(fā)設(shè)置里把百度地圖的接口域名加進合法域名列表然后重新編譯真機預覽。4.4 翻頁參數(shù)用錯導致重復數(shù)據(jù)現(xiàn)象翻頁拿到的 POI 和上一頁重復或者直接返回空。原因是page_num從 0 開始有人從 1 開始傳導致第一頁數(shù)據(jù)被跳過或重復。另外百度對深翻頁有限制翻到后面可能拿不到數(shù)據(jù)。解決辦法是頁碼嚴格從 0 遞增并在業(yè)務(wù)上做去重不要依賴接口保證唯一。4.5 回調(diào)里 this 指向丟失現(xiàn)象在 success 回調(diào)里用this.setData報錯提示 this 是 undefined。原因是普通函數(shù)的 this 不指向頁面實例。解決辦法是把回調(diào)寫成箭頭函數(shù)或者在調(diào)用前用const that this緩存。這個是小程序開發(fā)的通用坑不只是地圖接口會遇到。5. 進階把地圖能力封裝成可復用模塊跑通單個接口之后真正影響維護成本的是怎么組織代碼。我一般會把地圖相關(guān)調(diào)用統(tǒng)一收進一個 service 層頁面只負責拿數(shù)據(jù)渲染不直接碰 JSAPI。這樣換 AK、改參數(shù)、加緩存都只動一個地方。// services/mapService.js const BMapWX require(../utils/bmap-wx.js); const bmap new BMapWX({ ak: 你的AK }); // 統(tǒng)一封裝成 Promise頁面里用 async/await function searchNearby(keyword, lat, lng, radius 1000) { return new Promise((resolve, reject) { bmap.search({ query: keyword, location: ${lat},${lng}, radius, page_num: 0, page_size: 20, success: (res) resolve(res.originalData.results || []), fail: reject }); }); } // 坐標轉(zhuǎn)換也封裝一層避免頁面里到處寫 function gcj02ToBd09(lat, lng) { return new Promise((resolve, reject) { bmap.translate({ from: gcj02, to: bd09, location: ${lat},${lng}, success: (res) { const p res.originalData.result[0]; resolve({ lat: p.y, lng: p.x }); }, fail: reject }); }); } module.exports { searchNearby, gcj02ToBd09 };封裝成 Promise 之后頁面里的調(diào)用就干凈很多const mapService require(../../services/mapService.js); Page({ async onLoad() { const loc await this.getLocation(); const bd await mapService.gcj02ToBd09(loc.latitude, loc.longitude); const pois await mapService.searchNearby(超市, bd.lat, bd.lng, 2000); this.setData({ markers: pois }); }, getLocation() { return new Promise((resolve, reject) { wx.getLocation({ type: gcj02, success: resolve, fail: reject }); }); } });這樣做的收益在項目變大后特別明顯接口參數(shù)要調(diào)、AK 要換、要加失敗重試都只改 service 層。另外建議給檢索結(jié)果加一層本地緩存同一個中心點短時間內(nèi)重復搜同一關(guān)鍵字直接讀緩存能省調(diào)用量也能提速。緩存 key 用「關(guān)鍵字坐標半徑」拼設(shè)個幾分鐘過期就行。驗證封裝是否可靠我習慣寫一個最小頁面只做「定位→轉(zhuǎn)換→檢索→打點」這一條鏈路跑通再往業(yè)務(wù)里搬。真機上重點看三件事定位準不準、點打的位置對不對、翻頁數(shù)據(jù)重不重。這三樣沒問題基本就能上線了。我自己踩得最狠的一次是忘了轉(zhuǎn)坐標系測試機上看著差不多真機到現(xiàn)場偏了一條街返工查了半天才定位到是 GCJ02 和 BD09 混用。后來養(yǎng)成習慣凡是坐標進地圖接口前先問一句「這是哪個坐標系」。希望幫到你。本文還有配套的精品資源點擊獲取 百度地圖微信小程序JSAPI接入指南：檢索、逆地理與路線規(guī)劃實戰(zhàn)
簡介這份資源是面向微信小程序開發(fā)者的百度地圖 JavaScript API 接口包適合需要在社交、旅游、打車等場景中嵌入地理位置服務(wù)的初中級開發(fā)者。包內(nèi)共35個文件以js腳本、wxss樣式、json配置、wxml模板和png圖片為主壓縮包約28KB其中bmap-wx.js與bmap-wx.min.js為核心接口文件demo目錄提供了可直接參考的頁面示例README.md則給出基礎(chǔ)說明。已有88人學習下載。借助這套接口開發(fā)者可在小程序內(nèi)實現(xiàn)地圖展示、標記點與多邊形等覆蓋物添加、縮放移動、路徑規(guī)劃、地點檢索、駕車導航、公交查詢及周邊檢索并支持實時位置分享為社交與出行類應(yīng)用提供位置能力支撐。文件包命名中的master表明其為主版本穩(wěn)定性較好適合直接用于生產(chǎn)環(huán)境配合官方文檔與參數(shù)示例可幫助開發(fā)者快速上手并高效排查調(diào)用問題。1. 百度地圖微信小程序 JSAPI 到底解決什么問題很多團隊第一次在微信小程序里做地圖第一反應(yīng)是直接用微信原生的map組件。原生組件能顯示地圖、能打點、能畫線看起來夠用。但真到業(yè)務(wù)里問題就來了想按關(guān)鍵字搜周邊門店、想逆地理編碼把經(jīng)緯度換成中文地址、想算兩個點之間的步行路線、想畫一片多邊形區(qū)域做電子圍欄——這些原生組件都不直接給。于是就得自己接一套地圖服務(wù)而百度地圖微信小程序 JSAPI 就是干這個的它把百度地圖的檢索、逆地理、路線規(guī)劃、坐標轉(zhuǎn)換等能力封裝成能在小程序里直接調(diào)用的接口。這個標題指向的是一份 JSAPI 的接入包核心價值在于讓小程序開發(fā)者不用從零搭地圖后端就能拿到搜索、定位、算路這些能力。適合兩類人一類是剛接手小程序地圖需求、想快速跑通的新手另一類是已經(jīng)用了原生組件、但被檢索和算路卡住的熟手。下面按「先跑通、再調(diào)參、再避坑」的順序講清楚。2. 接入前的準備與最小可運行工程2.1 申請密鑰與配置合法域名百度地圖的接口調(diào)用都要帶一個 AKAccess Key這是身份憑證。申請流程在百度地圖開放平臺的控制臺完成創(chuàng)建應(yīng)用時選「微信小程序」類型填上小程序的 AppID平臺會生成對應(yīng)的 AK。這里有個容易忽略的點AK 是和小程序 AppID 綁定的換一個小程序就得重新申請不能混用。拿到 AK 之后還要在小程序后臺配置服務(wù)器域名。百度地圖的接口域名需要加進 request 合法域名列表否則真機上請求會被攔截。常見要加的有api.map.baidu.com和api.map.baidu.com下的路徑。開發(fā)階段可以在開發(fā)者工具里勾選「不校驗合法域名」但上線前必須配好不然線上直接白屏。提示AK 分瀏覽器端、服務(wù)端、小程序端幾種類型申請時選錯類型會導致接口返回權(quán)限錯誤這個坑后面避坑章節(jié)會細說。2.2 引入 JSAPI 文件與初始化這份 JSAPI 包通常是一個bmap-wx.js之類的文件把它放到小程序工程的utils或libs目錄下然后在頁面里 require 進來。初始化時傳入 AK創(chuàng)建一個 BMapWX 實例。// utils/bmap-wx.js 是引入的 JSAPI 文件 const BMapWX require(../../utils/bmap-wx.js); // 初始化ak 換成自己申請的值 const bmap new BMapWX({ ak: 你的小程序端AK }); Page({ data: { markers: [], address: }, onLoad() { // 頁面加載時做一次逆地理驗證 AK 是否可用 this.reverseGeocode(116.404, 39.915); }, reverseGeocode(lng, lat) { bmap.regeocoding({ location: ${lat},${lng}, // 注意順序是緯度在前 success: (res) { // res 里包含 address、business 等字段 this.setData({ address: res.originalData.result.formatted_address }); }, fail: (err) { console.error(逆地理失敗, err); } }); } });這段代碼做了三件事引入 JSAPI、用 AK 初始化實例、調(diào)用逆地理接口把經(jīng)緯度轉(zhuǎn)成地址。參數(shù)上location的格式是「緯度,經(jīng)度」順序反了會返回錯誤結(jié)果或空地址這是新手最常翻車的地方。success回調(diào)里的originalData是百度返回的原始結(jié)構(gòu)formatted_address是格式化后的地址字符串。跑通這一步說明 AK 和域名配置都沒問題可以往下做檢索和算路。3. 檢索、逆地理與路線規(guī)劃的落地寫法3.1 周邊檢索與關(guān)鍵字搜索的參數(shù)怎么設(shè)周邊檢索search和關(guān)鍵字搜索是地圖業(yè)務(wù)里用得最多的兩個接口。周邊檢索以某個中心點為核心按半徑找 POI關(guān)鍵字搜索則是在指定城市范圍內(nèi)按詞找。兩者的參數(shù)結(jié)構(gòu)類似但用途不同。// 周邊檢索找中心點 1000 米內(nèi)的咖啡店 bmap.search({ query: 咖啡, location: 39.915,116.404, // 緯度,經(jīng)度 radius: 1000, // 單位米最大一般 50000 page_num: 0, // 頁碼從 0 開始 page_size: 10, // 每頁條數(shù)最大 20 success: (res) { const pois res.originalData.results.map(item ({ name: item.name, address: item.address, lat: item.location.lat, lng: item.location.lng })); this.setData({ markers: pois }); }, fail: (err) console.error(err) });參數(shù)里radius是半徑單位米設(shè)太大返回結(jié)果會被截斷設(shè)太小又搜不到東西一般按業(yè)務(wù)場景給 500 到 3000。page_num從 0 開始翻頁時遞增但要注意百度對總頁數(shù)有限制深翻頁拿不到數(shù)據(jù)。page_size最大 20想一次多拿只能靠翻頁。返回的results數(shù)組里每條 POI 帶location對象里面是lat和lng直接可以喂給地圖組件的 markers。關(guān)鍵字搜索多一個region參數(shù)用來限定城市比如region: 北京。不傳 region 時結(jié)果可能跨城做本地生活類業(yè)務(wù)一定要傳。3.2 逆地理編碼與坐標轉(zhuǎn)換的配合逆地理編碼是把經(jīng)緯度換成地址前面已經(jīng)跑通。但這里有個坐標系問題必須講清楚百度地圖用的是 BD09 坐標系而微信小程序wx.getLocation默認返回的是 GCJ02 坐標系。兩者不轉(zhuǎn)換直接用位置會偏移幾百米這就是很多人說的「玄學偏移」。// 把微信拿到的 GCJ02 坐標轉(zhuǎn)成 BD09 bmap.translate({ from: gcj02, to: bd09, location: 39.915,116.404, success: (res) { // res.originalData.result 里是轉(zhuǎn)換后的坐標數(shù)組 const point res.originalData.result[0]; console.log(轉(zhuǎn)換后, point.y, point.x); // y 是緯度x 是經(jīng)度 }, fail: (err) console.error(err) });translate接口的from和to支持wgs84、gcj02、bd09三種坐標系互轉(zhuǎn)。注意返回結(jié)構(gòu)里y對應(yīng)緯度、x對應(yīng)經(jīng)度和常見的lat/lng命名不一樣取值時別搞反。實際業(yè)務(wù)里通常是先用wx.getLocation拿到 GCJ02 坐標轉(zhuǎn)成 BD09 后再去調(diào)檢索或逆地理這樣結(jié)果才準。3.3 路線規(guī)劃接口的調(diào)用與結(jié)果解析路線規(guī)劃分駕車、步行、騎行、公交幾種接口名不同但參數(shù)結(jié)構(gòu)接近。以駕車為例傳入起點和終點坐標返回的是分段路徑和總距離、總時長。bmap.driving({ origin: 39.915,116.404, // 起點 緯度,經(jīng)度 destination: 39.925,116.424, // 終點 success: (res) { const route res.originalData.result.routes[0]; console.log(總距離(米), route.distance); console.log(總耗時(秒), route.duration); // route.steps 是分段導航信息 route.steps.forEach(step { console.log(step.instructions); // 每段文字指引 }); }, fail: (err) console.error(err) });返回的routes是數(shù)組一般取第一條。distance單位米duration單位秒展示時要自己換算成公里和分鐘。steps里每段帶instructions文字指引和path坐標串畫線時把 path 解析出來喂給 polyline 即可。公交規(guī)劃返回結(jié)構(gòu)更復雜帶換乘信息解析時要多判空。4. 避坑與常見問題排查4.1 AK 類型選錯導致接口全部報錯現(xiàn)象所有接口都返回權(quán)限錯誤或狀態(tài)碼非 0控制臺提示 AK 無效。原因是申請時選了瀏覽器端或服務(wù)端類型而小程序端必須用「微信小程序」類型的 AK。解決方式是回控制臺重新創(chuàng)建應(yīng)用類型選對把新 AK 換進初始化代碼。這個坑很隱蔽因為 AK 字符串本身看起來沒問題只有類型不對。4.2 坐標系沒轉(zhuǎn)換導致位置偏移幾百米現(xiàn)象地圖上打的點和實際位置對不上偏移量穩(wěn)定在幾百米。原因是微信定位返回 GCJ02百度接口吃 BD09中間少了轉(zhuǎn)換。解決辦法是在拿到定位坐標后先調(diào)translate轉(zhuǎn)成 BD09再用于檢索、逆地理和打點。判斷是否偏移可以拿一個已知地標的坐標對比偏幾百米基本就是坐標系問題。4.3 真機請求被攔截而開發(fā)者工具正?，F(xiàn)象開發(fā)者工具里一切正常真機上接口全部失敗。原因是沒在小程序后臺配置 request 合法域名工具里勾了「不校驗合法域名」所以看不出來。解決方式是登錄小程序后臺在開發(fā)設(shè)置里把百度地圖的接口域名加進合法域名列表然后重新編譯真機預覽。4.4 翻頁參數(shù)用錯導致重復數(shù)據(jù)現(xiàn)象翻頁拿到的 POI 和上一頁重復或者直接返回空。原因是page_num從 0 開始有人從 1 開始傳導致第一頁數(shù)據(jù)被跳過或重復。另外百度對深翻頁有限制翻到后面可能拿不到數(shù)據(jù)。解決辦法是頁碼嚴格從 0 遞增并在業(yè)務(wù)上做去重不要依賴接口保證唯一。4.5 回調(diào)里 this 指向丟失現(xiàn)象在 success 回調(diào)里用this.setData報錯提示 this 是 undefined。原因是普通函數(shù)的 this 不指向頁面實例。解決辦法是把回調(diào)寫成箭頭函數(shù)或者在調(diào)用前用const that this緩存。這個是小程序開發(fā)的通用坑不只是地圖接口會遇到。5. 進階把地圖能力封裝成可復用模塊跑通單個接口之后真正影響維護成本的是怎么組織代碼。我一般會把地圖相關(guān)調(diào)用統(tǒng)一收進一個 service 層頁面只負責拿數(shù)據(jù)渲染不直接碰 JSAPI。這樣換 AK、改參數(shù)、加緩存都只動一個地方。// services/mapService.js const BMapWX require(../utils/bmap-wx.js); const bmap new BMapWX({ ak: 你的AK }); // 統(tǒng)一封裝成 Promise頁面里用 async/await function searchNearby(keyword, lat, lng, radius 1000) { return new Promise((resolve, reject) { bmap.search({ query: keyword, location: ${lat},${lng}, radius, page_num: 0, page_size: 20, success: (res) resolve(res.originalData.results || []), fail: reject }); }); } // 坐標轉(zhuǎn)換也封裝一層避免頁面里到處寫 function gcj02ToBd09(lat, lng) { return new Promise((resolve, reject) { bmap.translate({ from: gcj02, to: bd09, location: ${lat},${lng}, success: (res) { const p res.originalData.result[0]; resolve({ lat: p.y, lng: p.x }); }, fail: reject }); }); } module.exports { searchNearby, gcj02ToBd09 };封裝成 Promise 之后頁面里的調(diào)用就干凈很多const mapService require(../../services/mapService.js); Page({ async onLoad() { const loc await this.getLocation(); const bd await mapService.gcj02ToBd09(loc.latitude, loc.longitude); const pois await mapService.searchNearby(超市, bd.lat, bd.lng, 2000); this.setData({ markers: pois }); }, getLocation() { return new Promise((resolve, reject) { wx.getLocation({ type: gcj02, success: resolve, fail: reject }); }); } });這樣做的收益在項目變大后特別明顯接口參數(shù)要調(diào)、AK 要換、要加失敗重試都只改 service 層。另外建議給檢索結(jié)果加一層本地緩存同一個中心點短時間內(nèi)重復搜同一關(guān)鍵字直接讀緩存能省調(diào)用量也能提速。緩存 key 用「關(guān)鍵字坐標半徑」拼設(shè)個幾分鐘過期就行。驗證封裝是否可靠我習慣寫一個最小頁面只做「定位→轉(zhuǎn)換→檢索→打點」這一條鏈路跑通再往業(yè)務(wù)里搬。真機上重點看三件事定位準不準、點打的位置對不對、翻頁數(shù)據(jù)重不重。這三樣沒問題基本就能上線了。我自己踩得最狠的一次是忘了轉(zhuǎn)坐標系測試機上看著差不多真機到現(xiàn)場偏了一條街返工查了半天才定位到是 GCJ02 和 BD09 混用。后來養(yǎng)成習慣凡是坐標進地圖接口前先問一句「這是哪個坐標系」。希望幫到你。本文還有配套的精品資源點擊獲取