vue 項目模塊化引入百度地圖

 

1.1.安裝百度地圖依賴包

npm i vue-baidu-map --save

2.在src/main.js導入依賴包

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'  //這個地方是官方提供的ak密鑰
})

3.配置地圖的基本信息，在我們需要的組件中引用

<!--百度地圖-->
<baidu-map class="map"
           :center="{lng:121.6292529148,lat:31.2035397816}"
           :zoom='13'
           :scroll-wheel-zoom='true'>
  <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
  <bm-marker :position="{lng:121.6292529148,lat:31.2035397816}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
    <bm-label content='上海浦東展訊中心' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />
  </bm-marker>
</baidu-map>
<Table :columns="columns1" :data="data1"></Table>

最終效果如圖：