安裝

$ npm install vue-baidu-map --save

全局注冊

在main.js 里面引入以下代碼

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '百度地圖密鑰AK' })

?

使用方法

<doc-preview><baidu-map class="map" style="display: flex; flex-direction: column" center="北京"><p style="padding: 0 10px;">以下是使用 `bm-view` 組件渲染的百度地圖實例</p><bm-view style="width: 100%; height:100px; flex: 1"></bm-view></baidu-map> </doc-preview>

局部注冊

1.按需加載需要的組件，百度地圖提供的所有組件可以在依賴中找到，路徑\node_modules\vue-baidu-map\components\index.js

import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map'export default {components: {BaiduMap,BmView,BmControl,BmAutoComplete,BmLocalSearch} } <template><baidu-map class="bm-view" v-bind="mapOptions"><bm-control :offset="{width: '10px', height: '10px'}"><bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}"></bm-auto-complete></bm-control><bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search> </baidu-map></template><script>import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map' export default {components: {BaiduMap,BmView,BmControl,BmAutoComplete,BmLocalSearch},data() {return {mapOptions: {ak: 'ak',center: '廣州',scrollWheelZoom: true},keyword: ''}},methods: {} } </script><style> .bm-view {width: 100%;height: 300px; } </style>

總結

以上是生活随笔為你收集整理的vue调用百度地图API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。