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弹框展示，好像移动端不支持这个事件。。。
