Vue Baidu Map 插件的使用

　　最近在做一個項目，技術采用的是Vue.js套餐，有個百度地圖的需求，當時，大腦宕機，立馬去引入百度地圖API，當時想到兩種方法，一種是在index.html中全局引入js，此法吾不喜，就采用了第二種異步加載jsonp的方式，細節無關本文，暫且不提。噼里啪啦~噼里啪啦~ 代碼一氣呵成，本地測試完，立馬上服務器測試，what ？？？ 什么鬼 ？ 進入界面后，我的地圖呢？？地圖呢？？回看代碼，代碼中有一行window.onload = loadScript，呃~呃~呃~，vue中界面跳轉不會觸發這個， 歐德科 ？？？ 坑爹啊~ 有木有？？然后立馬百度進行搜索，此時眼前一亮，嘻嘻嘻~，我看到了什么？？vue-baidu-map，然后愛醬去官網看文檔，看完第一反應莫名其妙~~，為了那些跟我一樣不認真看文檔，粗心大意，腦袋容易宕機的碼農們 ，特記錄下這個插件的使用方法。

　　vue-baidu-map 官方地址

　　

　　安裝：

　　　這里只介紹npm安裝方式

$ npm install vue-baidu-map --save

 

　　注冊：

　　　注冊的方式有兩種 ： 全局注冊 & 局部注冊 ，各位可以根據自己的需求來選擇，我個人采用的是局部注冊，按需加載。個人注冊了一個公共的MapView.vue組件來實現地圖的功能，存放在項目組件庫components/common下。

　　　官方文檔描述1：局部注冊的 BaiduMap 組件必須聲明 ak 屬性。

　　　　　注: 這個ak指的是你的百度地圖開放平台獲取到的秘鑰

　　　官方文檔描述2：所有的獨立組件均存放在 vue-baidu-map/components 文件夾下，按需引用即可。

　　　　　剛開始，我就是被這句話給迷惑了，由於沒認真看文檔，又看到代碼，傻傻的去組件庫components中新建了一個vue-baidu-map文件夾，然后去注冊了一個Map.vue的組件。

　　　　　No~No~No~ 不是這樣的。注意：這里指的是vue-baid-map文件夾下的components組件庫，而不是我們項目中自己創建的components組件庫，不要跟我一樣犯傻。

 

　　在安裝完vue-baidu-map后，在node_modules中會有一個vue-baidu-map文件夾，我們現在來找到它，它的結構是這樣的：

　　　　vue-baidu-map

　　　　　　|__ .github

　　　　　　|__  build

　　　　　　|__ components

　　　　　　|__ test

　　　　　　|__ types

　　看到了嗎？ 這里有個components組件庫，而官方描述中叫我們引入的是這個文件下的獨立組件。

 

　　實現：

　　　　現在我們來看看代碼。

　　　　在個人注冊的組件MapView.vue中來實現地圖功能，

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
　　<!-- baidu-map指的既是BaiduMap組件 -->
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},  //經緯度
      zoom: 3　 //地圖展示級別
    }
  },
　　components: {
　　　　BaiduMap  //指定組件模板
　　},
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style lang="less" scoped>
.map {
　　width: 100%;
　　height: 500px; //必須給容器指高度，要不然地圖將顯示在一個高度為0的容器中，自然看不到
　　
　　/deep/ .anchorBL {　　//隱藏左下角百度地圖logo
　　　　display: none;
　　}
}
</style>

 

　　如你需要使用其他的組件，只需要根據官方提供的控件名，通過 import引入組件，然后在components·中指定組件模板，在template中使用即可。

　　例如：現在需要使用定位控件，官方提供的控件名是：BmGeolocation，接下來直接上代碼：

　　

<template>
   <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
　　　　<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
　　</baidu-map>
</template>
<script>
　import BaiduMap from 'vue-baidu-map/components/Map/Map.vue
　　import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},  
      zoom: 3　 
    }
  },
　　components: {
　　　　BaiduMap,
　　　　　BmGeolocation
　　},
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style lang="less" scoped>
.map {
　　width: 100%;
　　height: 500px; 
　　
　　/deep/ .anchorBL {　　
　　　　display: none;
　　}
}
</style>

 

文章內容就到此結束了。有什么不對的地方、不同的意見或者建議可以在底部留言。