【通俗易懂】Vue如何使用百度地圖，通過vue-baidu-map插件實作地圖功能【檔案使用介紹】

現在的地圖組件已經是很常用的東西了，基本上都會接觸到，那么如何使用呢，相信很多新手會有點懵
這里就把基礎的用法說一遍，然后說一下如何看檔案，這樣你就可以自己去添加功能了，

效果圖

我做的是PC端的
目前的基礎功能就是自動定位城市，然后可以檢索地點，這也是通用最常用的基礎功能了，

第一步：先下載插件

npm install vue-baidu-map --save

第二部：全域注冊一下，在main.js里面

提示：密鑰不填是地圖出不來的哦，

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '這個地方填你的ak密鑰'  //這個地方是官方提供的ak密鑰
})

ak密鑰在哪里來呢

就是從百度地圖的開放平臺申請的，自己去注冊一下然后申請一個ak密鑰就行了，
第一步：百度搜索百度地圖，進去，最下面有個開放平臺點進去

第二部：控制臺點進去

第三步：申請你的密鑰，如果有了后，在這個里面可以看到，那個一大串的訪問應用AK就是

先上完整代碼

//我已經代碼都注釋了，相信應該看得懂意思，不懂得下面我們繼續看檔案怎么看

<template>
  <div>
    <el-card style="height: 89vh">
      <el-input
        placeholder="請輸入地址"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="inputfz"
          >搜索</el-button
        >
      </el-input>
      <!-- 
    scroll-wheel-zoom是是否可以縮放
    @ready是圖加載完后觸發事件
    center是位置定位
    zoom是縮放大小限制
    inertial-dragging是允許慣性拖拽
   -->
      <baidu-map
        class="bm-view"
        :zoom="15"
        :center="center"
        inertial-dragging
        @ready="mapReady"
        :scroll-wheel-zoom="true"
      >
        <!-- 定位控制元件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
        <!-- 地區檢索  keyword：關鍵字搜索   @searchcomplete：檢索完成后的回呼函式   auto-viewport：檢索結束后是否自動調整地圖事業  -->
        <bm-local-search
          :keyword="keyword"
          @searchcomplete="search"
          :auto-viewport="true"
          class="search"
        ></bm-local-search>
        <!-- 縮放控制元件   anchor代表控制元件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      </baidu-map>
    </el-card>
  </div>
</template>

<script>
//引入組件
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
} from "vue-baidu-map";
export default {
  data() {
    return {
      //定位位置資訊
      center: {},
      //檢索關鍵字
      keyword: "",
      //輸入框input值
      input3: "",
    };
  },
  //需要引入的組件
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation,
  },
  methods: {
    //輸入框
    inputfz() {
      this.keyword = this.input3;
    },
    //地圖加載后的回呼
    mapReady({ BMap, map }) {
      //保存this指向，因為在百度的回呼中this不指向vue
      const _this = this;
      // 獲取自動定位方法
      var geolocation = new BMap.Geolocation();
      // 獲取自動定位獲取的坐標資訊
      geolocation.getCurrentPosition(
        function (r) {
          //可以conso.log看一下這個r，他里面包含了檢索到的位置資訊，下面就把兩個維度資訊賦值給center來定位
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat,
          };
        },
        //啟用高精度
        { enableHighAccuracy: true }
      );
    },
  },
};
</script>

<style scoped>
/* 給個寬高 */
.bm-view {
  height: 400px;
  width: 700px;
}
.input-with-select {
  width: 400px;
  margin-bottom: 5px;
}
.search {
  height: 300px;
  overflow: auto;
}
</style>

vue-baidu-map的檔案，不懂得可以查看

vue-baidu-map檔案地址：https://dafrok.github.io/vue-baidu-map/#/zh/index

注意：這個檔案并沒有搜索功能，無法搜索屬性名直接定位到解釋那邊，只能通過控制元件名來區分，

第一步：看一下你的控制元件名是啥

第二步：檔案內看這個位置，對應上的，再找屬性的解釋

看到沒有，到這里大家應該看明白了吧，其實就是你們的組件名，我就不再多截圖舉例了，然后你們就可以對應這個控制元件名，找該控制元件下面的屬性是什么意思了，

以后你們再添加功能，就檔案上看，然后把對應的空間寫在baidu-map內就行，然后添加對應空間的屬性來添加功能，注意些這個都是小寫哈，檔案上空間名有大寫，但是寫在html內標簽名統一小寫，