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