資訊專欄INFORMATION COLUMN
摘要：百度地圖這么大的一個平臺，應該會給開發者提供。上網搜索一番，在百度地圖開發實例番外篇實用方法持續更新中找到了解決方法，原來是需要針對進行多帶帶配置為百度地圖設置規則配置完成之后不報錯了，但是在瀏覽器中查看控制臺輸出，會發現依然報錯。
實現流程
按順序講一下自己的實現過程，中間踩了好幾個坑，感謝 Google，感謝 SegmentFault，讓我成功出坑。
百度地圖這么大的一個平臺，應該會給開發者提供 API。去哪里找呢？不知道，那就先打開百度地圖頁面：https://map.baidu.com/，看到頁面下方有百度地圖開放平臺，應該就是它了，點進去看看。
看到開放平臺最上方導航欄有“開發文檔”，文檔里面有“Web 開發中的 JavaScript API”，嗯，點擊進去看看都有啥。
進入 JavaScript API 頁面之后，查看各個示例的預覽圖，確定“POI 詳情展示”就是所需的功能。
進入該功能的 DEMO 頁面，左側有示例代碼，更新代碼后點擊上方的“運行”按鈕，在右側就會顯示代碼的執行結果。
要使用開放平臺的各項功能功能，需要先申請調用百度地圖 API 的 key：進入開放平臺的控制臺，選擇“創建應用”，應用類型選擇“瀏覽器端”，啟用服務默認全選，應用名稱和 Referer 白名單可按需設置，設置完成后點擊提交。
示例代碼中的坐標需要改成目標地點的經緯度，通過百度地圖的“拾取坐標系統”，用關鍵字進行搜索，得到搜索結果之后，點擊地圖中標記的點A，在頁面右上方會顯示當前坐標點 xxx.xxxxxx, xx.xxxxxx，將坐標復制下來之后，粘貼到示例代碼中，按照示例代碼中數字的格式，精確到小數點后三位即可 xxx.xxx, xx.xxx。
將示例代碼復制到項目中之后，ESLint 會報錯（用的 vue-cli，通過 vue init webpack project 指令安裝）。上網搜索一番，在百度地圖開發實例番外篇--實用方法（持續更新）中找到了解決方法，原來是需要針對 ESLint 進行多帶帶配置：
// .eslintrc OR .eslintrc.js
module.exports = {
...
"globals": {
//為百度地圖設置規則
"BMap": true,
"BMAP_NORMAL_MAP": true,
"BMAP_HYBRID_MAP":true,
"BMAP_ANCHOR_TOP_LEFT":true,
"BMAP_ANCHOR_TOP_RIGHT":true,
...
}
}
配置完成之后 ESLint 不報錯了，但是在瀏覽器中查看控制臺輸出，會發現依然報錯：Cannot read property "gc" of undefined。搜索一番后找到了解決方法，原來是要把示例代碼放到 Vue 的 mounted 這個生命周期鉤子函數中才行。如果還不行，可以在示例代碼外面加上一段代碼：
mounted () {
this.$nextTick(() => {
// 示例代碼
})
}
好了，到這里就大功告成了，哈哈。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93285.html
摘要：最近接手了一個需求，要求混合式開發，前端做好后將頁面嵌入到和中，需要用到百度地圖的地圖導航。所以需要換一種方式，總的思路是采用輪詢的方式在內嘗試喚起百度地圖喚起失敗后，判斷是處于前臺還是后臺，如果是前臺，則打開端百度地圖。 最近接手了一個需求，要求混合式開發，前端做好 h5 后將頁面嵌入到 ios 和 android 中，需要用到百度地圖的地圖導航。具體功能點如下： 如果手機端（io...
摘要：第三種，使用格式，即在中請求參數處理跨域問題當然請求方式只能是。最后發現有網友說版本不穩定引起的，于是把百度地圖回退到了，結果還真是可以了。請問在移動端頁面中播放優酷里面的視頻，怎樣實現 1.web掃碼登錄怎么實現，思路 步驟 WEB平臺 手機 第1步 生成二維碼 第2步 （ajax監控后臺） 掃碼 第3步 ...
閱讀 1911·2021-09-23 11:21
閱讀 1699·2019-08-29 17:27
閱讀 1056·2019-08-29 17:03
閱讀 724·2019-08-29 15:07
閱讀 1920·2019-08-29 11:13
閱讀 2379·2019-08-26 12:14
閱讀 919·2019-08-26 11:52
閱讀 1732·2019-08-23 17:09
