學習目標：

在vue開發中徹底把 —— 百度地圖API ——如何參考學會
看了我寫的這篇文章，你一定可以的，

專案背景說明：

最近這幾天在寫vue專案，遇到要用百度地圖API的情況，故上網去搜索，無奈方法五花八門，根本一點都不系統，而且有的文章完全胡說八道，按他的方法根本地圖都出不來，用最近比較流行的一句話概括：

好了廢話不多說，直接來吧，

個人總結的使用方法：

【步驟1】
直接在你搭建好的vue專案的public檔案夾中的——index.html——的上面引入下面這行代碼
【很多文章都說要 在專案中——npm install vue-baidu-map –save 個人覺得沒必要，至少我沒有這樣做】

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=自己的密鑰"></script>

至于密鑰就不多說了，網上是對的哈哈，
步驟原理分析：vue是單頁面開發，所以不管如何它始終只是把index.html決議成最終的頁面而已，就像我們寫一個HTML頁面一樣，是不是也可以在的結束標簽上面引入JS檔案一樣呢？
一樣的道理嘛！

【步驟2】
類似于參考Echarts一樣的手法 需要先寫一個div之類的來裝地圖（系結一個dom），讓地圖能有地方展示出來

 <div>
      <!-- 使用百度地圖API -->
      <div id="bdMap"></div>
  </div>

好了，萬事俱備只欠東風，這里啰嗦兩句，如果你想把地圖部分搞成一個組件，然后在父組件中引入的話，這樣我覺得沒得必要，【我師父說的，那我肯定要聽話，事實證明師父是不會錯的哈哈】原因很簡單，父組件呼叫子組件的方法確實麻煩啊，而且還涉及到傳參啊之類的

【步驟3】
在你當前組件的methods里面寫方法來配置你的地圖 （具體配置可以參考百度地圖API檔案示例demo）
說簡單點：直接粘貼復制過來自己改配置就行了
下面是我自己寫的配置項

methods: {
    myMap() {
      this.map = new BMapGL.Map("bdMap"); // 創建Map實體 注意要和你上面寫的div的id名一樣
      this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地圖,設定中心點坐標和地圖級別
      this.map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放
      //這里的配置很多，就不一一說明了，
    
  },
  mounted() {
  //最后需要在mounted鉤子里面調一次你自己定義的方法
    this.myMap();
  },

【步驟4】
最后再把調整一下CSS就行了

#bdMap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微軟雅黑";
}

這樣最基本的參考就可以實作了，

進階使用：

直接說這個功能的需求吧——實作點擊城市名按鈕，然后要在地圖上面切換到具體的城市去，最好此時在地圖上面要有一個城市的提示資訊自動提示，
有一說一，這個功能實作起來還是有一點的難度的，但是，俺們是那種輕言放棄的人嗎？
來吧，上代碼

頁面結構部分
簡單說一下頁面HTML代碼：
CSS部分我用CSS3中的偽元素通過定位的方式實作二級選單的基本樣式就不用多說了

<div>
      <!-- XX架構布局 -->
      <ul class="domtree" style="font-size: 16px">
        <li style="text-align: left">
        這里寫成這樣是因為不好使用v-for來回圈只有一個單獨的li 所以干脆 在data下面的——company陣列里面再多加了一個物件，用company[0]來表示
          <span @click="setNewCenter(0)">{{ company[0].name }}</span>
          <ul>
            <div :key="item.cid" v-for="(item, i) in company">
            外層嵌套div的目的是因為腳手架語法檢查太嚴格了，不允許使用 v-for 后面還  加一個  v-if 所以就套了一個div來實作回圈
            里面的li來實作判斷
              <li v-if="i > 0" @click="setNewCenter(i)">
              這里可以看出來回圈出的每個li都有一個點擊函式 接收一個i作為引數 然后索引i >0代表只回圈陣列第二項開始后面的項
                {{ item.name }}
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>

    <div>
      <!-- 使用百度地圖API -->
      <div id="bdMap"></div>
    </div>

JS部分

data() {
    return {
      map: false,這里是點睛之筆啊，這一步起很大的作用，目的是讓map在其他函式里面也能呼叫，因為檔案上面的demo不是用vue寫的，所以它配置了
      一些基本項以后直接就在后面寫XXX函式之類的來實作功能，但是vue不行啊，之前我們不是在methods里面寫了一個myMap這個函式嗎，但是你不可能
      直接在它里面再寫一個函式吧，這樣直接會報錯的，所以你得在外面寫一個點擊函式來控制它的點位的變化吧 對嗎？
      說了這么多，其實就是要實作map這個物件的共用的問題 【這一步其實等價于把map這個物件存在data里面，然后要用的地方直接加this就可以了】
      
      marker: [],這里寫個空陣列，然后通過this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat)));
      把畫出來的點位push到空陣列里面去

      lng: 103.549, //初始化經度
      lat: 30.7921, //初始化緯度
      company: [
        {
          cid: "0",
          name: "四川省電力總公司",
          address: "成都市XX街XX號",
          lng: 103.92,
          lat: 30.79,
        },
        {
          cid: "1",
          name: "成都市電力公司",
          address: "成都市XX街XX號",
          lng: 103.92,
          lat: 30.69,
        },
        {
          cid: "2",
          name: "綿陽市電力公司",
          address: "綿陽市XX街XX號",
          lng: 103.82,
          lat: 30.59,
        },
        {
          cid: "3",
          name: "自貢市電力公司",
          address: "自貢市XX街XX號",
          lng: 103.72,
          lat: 30.49,
        },
        {
          cid: "4",
          name: "攀枝花市電力公司",
          address: "攀枝花市XX街XX號",
          lng: 103.62,
          lat: 30.39,
        },
      ],

    };
  },
  methods: {
    myMap() {
      this.map = new BMapGL.Map("bdMap"); // 創建Map實體
      this.map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 12); // 初始化地圖,設定中心點坐標和地圖級別
      this.map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放

 	這一步是師父教我的，我認為是最妙的一部分 
 		//直接forEach回圈遍歷目標陣列的每一個item 然后提前就把點位畫好
       this.company.forEach((v, i) => {
        //把5個點位提前畫出來
        this.marker.push(new BMapGL.Marker(new BMapGL.Point(v.lng, v.lat)));
        this.map.addOverlay(this.marker[i]);//百度地圖API  畫出mark點位 

  這一步我還在研究中，我師父寫的太精妙了，反正是用來讓地圖點位提示框通過 ——點擊城市名—— 而自動顯示的
  貌似這一部分還是引入了一個JS的檔案 然后才能呼叫  BMapLib.EventWrapper.addListener這個方法
        BMapLib.EventWrapper.addListener(this.marker[i], "click", (e) => {
          console.log("click");
          this.map.openInfoWindow(//百度地圖API  實作打開資訊視窗  有兩個引數 第一個是InfoWindow配置項，
          //第二個是點位new BMapGL.Point(v.lng, v.lat)
            new BMapGL.InfoWindow("地址 :" + this.company[i].address, {
              width: 100,
              height: 50,
              title: this.company[i].name,
            }),
            new BMapGL.Point(v.lng, v.lat)
          ); // 開啟資訊視窗1
        });
      });
    },

    setNewCenter(i) {
      this.lng = this.company[i].lng;
      this.lat = this.company[i].lat;
      var point = new BMapGL.Point(this.lng, this.lat);

      this.map.setCenter(point); // 設定地圖中心點

      BMapLib.EventWrapper.trigger(this.marker[i], "click");
      這里不能畫點，只能提前把點點在圖上畫出來  不然傳一個引數進去他就畫一個點 這樣會造成點數重疊
    },

  },

總結：

簡單說，其實vue中用百度地圖最基本的東西還是不難的，只是有很多的API需要去看去學習，難的地方還是在具體功能的實作上，
就像今天遇到的bug一樣，把我師父都坑了哈哈，就是因為重復畫mark點，導致原來系結了事件的mark點被覆寫了，結果就是不顯示
地圖點位提示框，但是也不報錯，哈哈哈，太不講武德了吧，
用這個其實跟Echarts差不多，無非就是系結dom 然后加配置項，然后畫出來，只不過方法不同而已

希望看了各位看官看了能有一定的識訓吧，記得來個一鍵三連唄，