2023年10月01日更新
百度地图官网api已更新，vue-baidu-map使用的api已过时，推荐使用最新的百度地图api:vue项目中使用百度地图
新版本和旧版本对比：就目前的使用体验旧版本在使用自定义颜色地图的时候加载瓦片图经常出现空白，用户体验很不好，所以这里推荐使用新版本的个性化地图。
数据可视化大屏项目中，经常需要使用到百度地图，这里数据可视化大屏项目使用vue2框架来实现的，这里记录一下vue-baidu-map使用流程.如果你是vue3项目使用百度地图，请看这里：vue3 vite项目使用百度地图插件
文档地址
vue-baidu-map插件文档
安装依赖
pnpm i vue-baidu-map
获取百度地图key
在使用前，您需先申请密钥（ak）才可使用
申请百度key
main.js引入
// 引入百度地图插件
import BaiduMap from 'vue-baidu-map'
// 百度地图key,我们将申请到的百度地图key单独放在一个配置文件里
import { BaiduMapKey } from './config/config.js'
Vue.use(BaiduMap, {
ak: BaiduMapKey
})
百度地图渲染
<template>
<div class="baiduMapBody">
<baidu-map ref="bmap" class="bm-view" :center="center" :zoom="zoom" @ready="handleMapReady"></baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
center: { lng: 116.404, lat: 39.915 },
zoom: 15,
};
},
methods: {
handleMapReady() {
const mapInstance = this.$refs.bmap.map;
// 启用鼠标滚轮缩放功能
mapInstance.enableScrollWheelZoom(true);
this.center.lng = 116.404;
this.center.lat = 39.915;
this.zoom = 10;
},
},
};
</script>
<style>
.bm-view {
width: 100%;
height: 100%;
position: relative;
}
.baiduMapBody{
position: relative;
width: 100%;
height: 100%;
}
</style>
