vue中使用百度地圖vue-baidu-map

安裝

npm install vue-baidu-map --save

 

全局注冊

全局注冊將一次性引入百度地圖組件庫的所有組件。需在入口文件main.js中引入vue-baidu-map

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發者平台申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

因為是全局注冊的，所以你可以在任何組件中直接使用：

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

 

局部注冊

如果有按需引入組件的需要，可以選擇局部注冊百度地圖組件，這將減少工程打包后的容量尺寸。局部注冊的 BaiduMap 組件必須聲明 ak 屬性。 所有的獨立組件均存放在 vue-baidu-map/components 文件夾下，按需引用即可。 由於未編譯的 ES 模塊不能在大多數瀏覽器中直接運行，如果引入組件時發生運行時錯誤，請檢查 webpack 的 loader 配置，確認 include 和 exclude 選項命中了組件庫。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

 

點我查看官方文檔