Web端嵌入百度地圖實現流程

實現流程

按順序講一下本身的實現過程，中間踩了好幾個坑，感謝 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(() => {
        // 示例代碼
    })
}

好了，到這裏就大功告成了，哈哈。