安装
$ 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>