摘要：百度地圖這么大的一個(gè)平臺(tái)，應(yīng)該會(huì)給開(kāi)發(fā)者提供。上網(wǎng)搜索一番，在百度地圖開(kāi)發(fā)實(shí)例番外篇實(shí)用方法持續(xù)更新中找到了解決方法，原來(lái)是需要針對(duì)進(jìn)行多帶帶配置為百度地圖設(shè)置規(guī)則配置完成之后不報(bào)錯(cuò)了，但是在瀏覽器中查看控制臺(tái)輸出，會(huì)發(fā)現(xiàn)依然報(bào)錯(cuò)。

按順序講一下自己的實(shí)現(xiàn)過(guò)程，中間踩了好幾個(gè)坑，感謝 Google，感謝 SegmentFault，讓我成功出坑。

百度地圖這么大的一個(gè)平臺(tái)，應(yīng)該會(huì)給開(kāi)發(fā)者提供 API。去哪里找呢？不知道，那就先打開(kāi)百度地圖頁(yè)面：https://map.baidu.com/，看到頁(yè)面下方有百度地圖開(kāi)放平臺(tái)，應(yīng)該就是它了，點(diǎn)進(jìn)去看看。

看到開(kāi)放平臺(tái)最上方導(dǎo)航欄有“開(kāi)發(fā)文檔”，文檔里面有“Web 開(kāi)發(fā)中的 JavaScript API”，嗯，點(diǎn)擊進(jìn)去看看都有啥。

進(jìn)入 JavaScript API 頁(yè)面之后，查看各個(gè)示例的預(yù)覽圖，確定“POI 詳情展示”就是所需的功能。

進(jìn)入該功能的 DEMO 頁(yè)面，左側(cè)有示例代碼，更新代碼后點(diǎn)擊上方的“運(yùn)行”按鈕，在右側(cè)就會(huì)顯示代碼的執(zhí)行結(jié)果。

要使用開(kāi)放平臺(tái)的各項(xiàng)功能功能，需要先申請(qǐng)調(diào)用百度地圖 API 的 key：進(jìn)入開(kāi)放平臺(tái)的控制臺(tái)，選擇“創(chuàng)建應(yīng)用”，應(yīng)用類(lèi)型選擇“瀏覽器端”，啟用服務(wù)默認(rèn)全選，應(yīng)用名稱(chēng)和 Referer 白名單可按需設(shè)置，設(shè)置完成后點(diǎn)擊提交。

示例代碼中的坐標(biāo)需要改成目標(biāo)地點(diǎn)的經(jīng)緯度，通過(guò)百度地圖的“拾取坐標(biāo)系統(tǒng)”，用關(guān)鍵字進(jìn)行搜索，得到搜索結(jié)果之后，點(diǎn)擊地圖中標(biāo)記的點(diǎn)A，在頁(yè)面右上方會(huì)顯示當(dāng)前坐標(biāo)點(diǎn) xxx.xxxxxx, xx.xxxxxx，將坐標(biāo)復(fù)制下來(lái)之后，粘貼到示例代碼中，按照示例代碼中數(shù)字的格式，精確到小數(shù)點(diǎn)后三位即可 xxx.xxx, xx.xxx。

將示例代碼復(fù)制到項(xiàng)目中之后，ESLint 會(huì)報(bào)錯(cuò)（用的 vue-cli，通過(guò) vue init webpack project 指令安裝）。上網(wǎng)搜索一番，在百度地圖開(kāi)發(fā)實(shí)例番外篇--實(shí)用方法（持續(xù)更新）中找到了解決方法，原來(lái)是需要針對(duì) ESLint 進(jìn)行多帶帶配置：

// .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 不報(bào)錯(cuò)了，但是在瀏覽器中查看控制臺(tái)輸出，會(huì)發(fā)現(xiàn)依然報(bào)錯(cuò)：Cannot read property "gc" of undefined。搜索一番后找到了解決方法，原來(lái)是要把示例代碼放到 Vue 的 mounted 這個(gè)生命周期鉤子函數(shù)中才行。如果還不行，可以在示例代碼外面加上一段代碼：

mounted () {
    this.$nextTick(() => {
        // 示例代碼
    })
}

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