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