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>
原文：https://www.cnblogs.com/Mrrabbit/p/11098289.html