使用前的基礎(chǔ)步驟

流程示意圖：

百度基礎(chǔ)流程圖.png

獲取ak示意圖.png

一個百度賬號可以創(chuàng)建多個ak，創(chuàng)建ak時得在應(yīng)用類型中進行設(shè)置，此處我們已PC端進行展示選擇了瀏覽器端。
（2）引入百度地圖API
如同示意圖，以標(biāo)簽形式引入，路徑ak設(shè)置為申請的AK
（3）創(chuàng)建一個百度地圖及初始化

  var map = new BMap.Map("container");|
  // 創(chuàng)建地圖實例件已， ‘container’為承載地圖的dom的ID
  var point = new BMap.Point(116.404, 39.915);
  // 創(chuàng)建點坐標(biāo) (當(dāng)前是北京的坐標(biāo))
  map.centerAndZoom(point, 15);
  // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別 

當(dāng)創(chuàng)建map實例后獲取的是一個百度地圖核心對像元暴，該對象定義了百度地圖的基本屬性（如層級篷扩，拖拽，縮放茉盏，以及地圖樣式等）以及可以監(jiān)聽百度地圖的一系列事件鉴未。
以上完成后將得到一下頁面

maptest.png

百度地圖的Dom展示和打點

設(shè)置Dom的展示

通過打印百度地圖的大對象我們可以獲取里面的眾多類

baidumapclass.png

在參與的項目中我們需要完成以下效果

展示效果.png

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)    //設(shè)置label展示的經(jīng)緯度區(qū)域
    label.setContent(            //設(shè)置label的展示內(nèi)容
      '<p>自定義label<p/>'
    );
   label.setStyle({             //設(shè)置label的展示樣式
      color:'red'
    });
    map.addOverlay(label);

得到效果

展示效果2.png

使用方法與上述的核心對象一樣都是獲取一個實例讶迁，覆蓋物類中的文本標(biāo)注類的其他方法在使用文檔中的描述為：

Label的其他方法.png

監(jiān)聽地圖的打點事件

上述敘述到在百度地圖的核心對象上可以監(jiān)聽一系列地圖的事件，開發(fā)文檔上我們可以監(jiān)聽到的地圖事件有這些：

地圖核心對象可監(jiān)聽事件.png

使用方式和給Dom對象添加事件監(jiān)聽一致啸驯，下列我們使用百度地圖監(jiān)聽點擊事件來獲取點擊區(qū)域的的經(jīng)緯度

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.addEventListener('click', function (e) {
    console.log(e);
});

得到以下信息

點擊地圖后回調(diào)所獲取的信息.png

通過獲取的經(jīng)緯度客扎，我們可以通過該經(jīng)緯度添加一個覆蓋物，達到地圖打點的效果罚斗。
通過以上兩個案例徙鱼，我們熟悉了怎么對照百度地圖開發(fā)文檔來開發(fā)我們需求的效果。

結(jié)合項目實現(xiàn)封裝和復(fù)用

我們獲取百度的眾多對象是以獲取構(gòu)造函數(shù)實例的形式展示出來针姿，以此為思路袱吆，在項目中使用百度地圖時，我們考慮到需要便捷的使用和修改地圖的狀態(tài)且各項功能不耦合距淫，以構(gòu)造函數(shù)的方式來封裝是一個不錯的選擇绞绒。

const CreateMap = function (initStr: any) {
  this.isDot = false; //是否已經(jīng)打點
  this.map = {};//定義全局的map對象
  this.initMap(); //初始化創(chuàng)建地圖
}
//初始化地圖
CreateMap.prototype.initMap = function () {
  let that = this;
  // 百度地圖API功能
  this.map = new BMapGL.Map('allmap', {
    minZoom: 11,
    maxZoom: 20,
  }); // 創(chuàng)建Map實例
  this.map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
 //綁定打點事件
CreateMap.prototype.bindEvent = function () {
   let that = this;
  that.map.addEventListener('click', function (event) {
      //點擊后操作
})
}

之后我們可以在其他頁面來創(chuàng)建一個地圖

let map = new CreateMap();

并且在頁面數(shù)據(jù)請求回來后，給地圖綁定事件監(jiān)聽

map.bindEvent()

遭遇的地圖坑及解決方法

（1）需求情景：當(dāng)鼠標(biāo)移入移出label時榕暇，展示出當(dāng)前l(fā)abel代表的區(qū)域的范圍蓬衡。

效果1.gif

復(fù)現(xiàn)情景：在鼠標(biāo)移出移入label時，此時同時縮放地圖層級拐揭，會導(dǎo)致監(jiān)聽鼠標(biāo)移入移出事件發(fā)生錯誤撤蟆，頁面長期處于移出或者事件.
解決方法及思路：監(jiān)聽地圖的層級變化奕塑，當(dāng)?shù)貓D層級發(fā)生改變時堂污，禁用鼠標(biāo)的移入移出事件回調(diào)。
（2）需求情景：刪除地圖上的指定覆蓋物龄砰。
遇到坑之前的實現(xiàn)思路：每添加一個覆蓋物會生成一個對象盟猖，獲取所有的覆蓋物通過該覆蓋物的對象名稱，進行過濾换棚。
結(jié)果：百度地圖的覆蓋物對象名稱經(jīng)常會改變（官方改變）式镐，導(dǎo)致清除失敗。
解決方法及思路：將該對添加到一個數(shù)組存儲固蚤，統(tǒng)一清除娘汞。

是的是的，我們的初期分享到這就結(jié)束了夕玩。后期將長期更新百度地圖的使用及遭遇的坑你弦。