1.首先使用百度地圖js API 前， 需要申請應(yīng)用的ak 秘鑰炼邀，在官網(wǎng)上自己申請即可魄揉；
2.普通的 html 文件 中只要給定script標(biāo)簽如：
<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)建點坐標(biāo)
map.centerAndZoom(point, 15); // 初始化地圖洛退，設(shè)置中心點坐標(biāo)和地圖級別
- 在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標(biāo)簽摇零，異步加載
在需要使用map地圖的vue文件用引入
import BaiduMap from '../../common/map.js'
BaiduMap.init()
.then((BMap) => {
console.log(BMap)
// 這個時候就可以訪問到BMap了，
})
5.自己做的一個項目有個需要需要顯示各個門店的地址桶蝎，標(biāo)注出來，官網(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 呻顽，配置的信息及自定義標(biāo)注就可以展示在地圖上了。丹墨。廊遍。
6.坑： 在pc端 可以 是有個hotspotclick 觸發(fā) Poi彈框展示，好像移動端不支持這個事件贩挣。喉前。没酣。
