1. 安装依赖

npm i --save vue-baidu-map

2. 全局引入用法

先在main.js中引入

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: '你申请的key' })

然后在你的.vue文件中

<template><div id="index"><baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" /></div></template><script>export default {name: 'Index',components: {},data() {return {center: { lng: 0, lat: 0 },zoom: 0}},created() {},mounted() {},methods: {handler({ BMap, map }) {console.log(BMap, map)this.center.lng = 121.487899486this.center.lat = 31.24916171this.zoom = 15}}}</script><style lang="less" scoped>.map{width: 500px;height: 500px;}</style>

没问题的话现在已经可以在页面上看到上海市了

3. 局部引入用法

在你的.vue文件中

<template><div id="index"><baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler" /></div></template><script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'export default {name: 'Index',components: {BaiduMap},data() {return {ak: '你的key',center: { lng: 0, lat: 0 },zoom: 0}},created() {},mounted() {},methods: {handler({ BMap, map }) {console.log(BMap, map)this.center.lng = 121.487899486this.center.lat = 31.24916171this.zoom = 15}}}</script><style lang="less" scoped>.map{width: 500px;height: 500px;}</style>

参考：Vue2中百度地图API的使用_上进的鹏多多的博客-CSDN博客

惨考：【通俗易懂】Vue如何使用百度地图，通过vue-baidu-map插件实现地图功能【文档使用介绍】_接口写好了吗的博客-CSDN博客