随着vue3的到来，各个组件也到了该升级的时候了。作为前端的我也一直想做点自己的东西，工作中由于项目升级所以顺便搞了个百度地图vue3版本。

        组件使用灵活，可在地图ready事件中定制百度地图原生api功能。此外还封装了一些常用组件：比例尺，缩放，3D，卫星地图，定位，测距，自定义点，信息窗体，工交检索，点聚合，路书，热力图，弧线图等等

1. vue3组件：vue-baidu-map-3x

api文档

https://map.heifahaizei.com/https://map.heifahaizei.com/

1.1.安装

npm i --save vue-baidu-map-3x

1.2 初始化

import { createApp } from 'vue';
import BaiduMap from 'vue-baidu-map-3x';

const app = createApp(App);
app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});

1.2 使用

<template>
  <baidu-map class="map" :center="{lng: 118.454, lat: 32.955}" :zoom="5" @ready="ready" >
  </baidu-map>
</template>

<script setup>
const ready = ({BMap,map})=>{
  //  对地图进行自定义操作
};
</script>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>

1.3 效果

更多组件和api请查看文档

https://map.heifahaizei.com/

2. 离线插件：vue-baidu-map-offline 

支持vue-biadu-map、vue-baidu-map-3x

具体使用请联系作者微信：yjf163163

关于我

添加微信（yjf163163）并回复加群，即可加入”前端男海“群。交流学习，及时获取代码最新动态