安装

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