1.首先使用百度地圖js API 前， 需要申請應用的ak 秘鑰，在官網上自己申請即可；
2.普通的 html 文件 中只要給定script標簽如：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak秘鑰"></script>
3，在js 代碼中 調用必須要在 頁面加載完成后使用 即 window.onload = function(){ }中完成地圖的繪制
3.1
var map = new BMap.Map("allmap", {minZoom: 14, maxZoom: 20}); // 創建地圖實例， 及最大最小的級別
var point = new BMap.Point(116.403694,39.927552); // 創建點坐標
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別
- 在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
// }
// 百度地圖異步加載回調處理
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)
})
}
}
動態生成script標簽，異步加載
在需要使用map地圖的vue文件用引入
import BaiduMap from '../../common/map.js'
BaiduMap.init()
.then((BMap) => {
console.log(BMap)
// 這個時候就可以訪問到BMap了，
})
5.自己做的一個項目有個需要需要顯示各個門店的地址，標注出來，官網上有一個 數據管理平臺，也就是添加圖層，
也是是麻點圖層，添加數據就是利用百度的云存儲能力，把自己門店地理位置信息展示上去，
var customLayer = new BMap.CustomLayer({
geotableId: 187945, // 換成你自己的數據表 g eotableId
q: '', // 檢索關鍵字
tags: '', // 空格分隔的多字符串
filter: '' // 過濾條件
})
添加圖層，數據批量上傳，每個新建的表都要有個geotableId ，配置的信息及自定義標注就可以展示在地圖上了。。。
6.坑： 在pc端 可以 是有個hotspotclick 觸發 Poi彈框展示，好像移動端不支持這個事件。。。
