1.首先使用百度地圖js API 前， 需要申請應(yīng)用的ak 秘鑰，在官網(wǎng)上自己申請即可；
2.普通的 html 文件 中只要給定script標簽如：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak秘鑰"></script>

3，在js 代碼中 調(diào)用必須要在 頁面加載完成后使用 即 window.onload = function(){ }中完成地圖的繪制
3.1

var map = new BMap.Map("allmap", {minZoom: 14, maxZoom: 20});      // 創(chuàng)建地圖實例， 及最大最小的級別
var point = new BMap.Point(116.403694,39.927552);  // 創(chuàng)建點坐標
map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點坐標和地圖級別

4. 在vue使用，直接在入口index.html中引入，使用，會報錯 BMap is not defined,其次，我們想只在我們自己的頁面使用沒必要在index.html中引入，可以在根目錄先新建一個map.js 代碼如下：

export default {
  init: function () {
    const AK = 'vcM72RPfaB2Wqcqq7QBli94s4GUyOiWY'
    const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
    return new Promise((resolve, reject) => {
      // 如果已加載直接返回
      // if (typeof BMap !== 'undefined') {
      //   resolve(BMap)
      //   return true
      // }
      // 百度地圖異步加載回調(diào)處理
      window.onBMapCallback = function () {
        console.log('百度地圖腳本初始化成功...')
        // eslint-disable-next-line
        resolve(BMap)
      }

      // 插入script腳本
      let scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', BMapURL)
      document.body.appendChild(scriptNode)
    })
  }
}

動態(tài)生成script標簽，異步加載
在需要使用map地圖的vue文件用引入

import BaiduMap from '../../common/map.js'
BaiduMap.init()
      .then((BMap) => {
        console.log(BMap)
        // 這個時候就可以訪問到BMap了，
      })

5.自己做的一個項目有個需要需要顯示各個門店的地址，標注出來，官網(wǎng)上有一個 數(shù)據(jù)管理平臺，也就是添加圖層，
也是是麻點圖層，添加數(shù)據(jù)就是利用百度的云存儲能力，把自己門店地理位置信息展示上去，

var customLayer = new BMap.CustomLayer({
          geotableId: 187945, // 換成你自己的數(shù)據(jù)表 g eotableId
          q: '', // 檢索關(guān)鍵字
          tags: '', // 空格分隔的多字符串
          filter: '' // 過濾條件
        })

添加圖層，數(shù)據(jù)批量上傳，每個新建的表都要有個geotableId ，配置的信息及自定義標注就可以展示在地圖上了。。。
6.坑： 在pc端 可以 是有個hotspotclick 觸發(fā) Poi彈框展示，好像移動端不支持這個事件。。。