使用前的基础步骤
流程示意图：
（1）获取Ak
一个百度账号可以创建多个ak，创建ak时得在应用类型中进行设置，此处我们已PC端进行展示选择了浏览器端。
（2）引入百度地图API
如同示意图，以标签形式引入，路径ak设置为申请的AK
（3）创建一个百度地图及初始化
var map = new BMap.Map("container");|
// 创建地图实例， ‘container’为承载地图的dom的ID
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标 (当前是北京的坐标)
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
当创建map实例后获取的是一个百度地图核心对像，该对象定义了百度地图的基本属性（如层级，拖拽，缩放，以及地图样式等）以及可以监听百度地图的一系列事件。
以上完成后将得到一下页面
百度地图的Dom展示和打点
设置Dom的展示
通过打印百度地图的大对象我们可以获取里面的众多类
在参与的项目中我们需要完成以下效果
所以我们使用了百度地图的Overlay（覆盖物类）中的Label（文本标注类），该类可以识别输入的dom元素，方便我们自定义地图展示的覆盖物的样式。
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15)；
var label = new BMapGL.Label(); // 使用label
label.setPosition(point) //设置label展示的经纬度区域
label.setContent( //设置label的展示内容
'<p>自定义label<p/>'
);
label.setStyle({ //设置label的展示样式
color:'red'
});
map.addOverlay(label);
得到效果
使用方法与上述的核心对象一样都是获取一个实例，覆盖物类中的文本标注类的其他方法在使用文档中的描述为：
以上我们只是简单的展示了Label中的两种方法的使用，其他方法的使用应也和这个两种方法类似。
监听地图的打点事件
上述叙述到在百度地图的核心对象上可以监听一系列地图的事件，开发文档上我们可以监听到的地图事件有这些：
使用方式和给Dom对象添加事件监听一致，下列我们使用百度地图监听点击事件来获取点击区域的的经纬度
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.addEventListener('click', function (e) {
console.log(e);
});
得到以下信息
通过获取的经纬度，我们可以通过该经纬度添加一个覆盖物，达到地图打点的效果。
通过以上两个案例，我们熟悉了怎么对照百度地图开发文档来开发我们需求的效果。
结合项目实现封装和复用
我们获取百度的众多对象是以获取构造函数实例的形式展示出来，以此为思路，在项目中使用百度地图时，我们考虑到需要便捷的使用和修改地图的状态且各项功能不耦合，以构造函数的方式来封装是一个不错的选择。
const CreateMap = function (initStr: any) {
this.isDot = false; //是否已经打点
this.map = {};//定义全局的map对象
this.initMap(); //初始化创建地图
}
//初始化地图
CreateMap.prototype.initMap = function () {
let that = this;
// 百度地图API功能
this.map = new BMapGL.Map('allmap', {
minZoom: 11,
maxZoom: 20,
}); // 创建Map实例
this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//绑定打点事件
CreateMap.prototype.bindEvent = function () {
let that = this;
that.map.addEventListener('click', function (event) {
//点击后操作
})
}
之后我们可以在其他页面来创建一个地图
let map = new CreateMap();
并且在页面数据请求回来后，给地图绑定事件监听
map.bindEvent()
遭遇的地图坑及解决方法
（1）需求情景：当鼠标移入移出label时，展示出当前label代表的区域的范围。
复现情景：在鼠标移出移入label时，此时同时缩放地图层级，会导致监听鼠标移入移出事件发生错误，页面长期处于移出或者事件.
解决方法及思路：监听地图的层级变化，当地图层级发生改变时，禁用鼠标的移入移出事件回调。
（2）需求情景：删除地图上的指定覆盖物。
遇到坑之前的实现思路：每添加一个覆盖物会生成一个对象，获取所有的覆盖物通过该覆盖物的对象名称，进行过滤。
结果：百度地图的覆盖物对象名称经常会改变（官方改变），导致清除失败。
解决方法及思路：将该对添加到一个数组存储，统一清除。
是的是的，我们的初期分享到这就结束了。后期将长期更新百度地图的使用及遭遇的坑。
