diff --git a/snowy-admin-web/src/components/Map/bMap/README.md b/snowy-admin-web/src/components/Map/bMap/README.md
new file mode 100644
index 00000000..4097095e
--- /dev/null
+++ b/snowy-admin-web/src/components/Map/bMap/README.md
@@ -0,0 +1,181 @@
+BMap
+====
+
+> 百度地图组件，常用于地图展示使用
+
+该组件由 [小诺开源技术](https://www.xiaonuo.vip) 封装
+
+
+### 使用方式
+
+```vue
+<template>
+	<a-map ref="map" api-key="******" @complete="handleComplete"
+		   @marker-click="handleMarkerClick"></a-map>
+</template>
+
+<script setup name="exmAMap">
+import AMap from '@/components/Map/bMap/index.vue'
+
+const map = ref(null)
+
+const handleComplete = () => {
+	// 渲染 点标记
+  	map.value.renderMarker(
+		[
+			{
+				position: [116.39, 39.9],
+				title: 'TA',
+				content: 'CA',
+				label: {
+					content: 'LCA'
+				}
+			},
+			{
+				position: [116.33, 39.5],
+				title: 'TB',
+				icon: '//vdata.amap.com/icons/b18/1/2.png'
+			}
+		]
+	)
+}
+
+const handleMarkerClick = (position) => {
+	map.value.openInfoWindow(position)
+}
+</script>
+```
+
+### Prop属性
+
+| 名称            | 说明           | 类型     | 默认值  |
+|---------------|--------------|--------|------|
+| mid           | 容器ID         | String | 时间戳  |
+| apiKey        | 地图Key        | String |      |
+| center        | 地图中心点        | String | 自动定位 |
+| plugins       | 地图控件         | Array  |      |
+| viewMode      | 效果：2D，3D     | String | 3D   |
+| rotationAngle | 旋转角度         | Number | 60   |
+| tiltAngle     | 倾斜角度         | Number | 70   |
+| zoom          | 地图缩放比例       | Number | 12   |
+| mapStyle      | 地图样式：个性化地图   | String |      |
+
+#### 地图控件
+
+- BMap.ScaleControl：比例尺
+- BMap.ZoomControl：缩放
+- BMap.LocationControl：定位
+- BMap.NavigationControl3D：3D控件
+
+### 事件
+
+| 名称          | 说明            | 参数       | 参数类型  |
+|-------------|---------------|----------|-------|
+| complete    | 当地图初始化完成时触发   | -        | -     |
+| markerClick | 当点击了点覆盖物时触发   | position | Array |
+
+### 方法
+
+| 名称                   | 说明        | 参数                     | 参数类型              |
+|----------------------|-----------|------------------------|-------------------|
+| renderMarker         | 渲染 点标记    | dataArr                | Array             |
+| renderIconMarker     | 渲染 图标标记   | dataArr                | Array             |
+| render3DCircleMarker | 渲染 3D圆点标记 | dataArr                | Array             |
+| render3DIconMarker   | 渲染 3D图标标记 | dataArr                | Array             |
+| renderPolyline       | 渲染 线      | dataArr,option         | Array,JSON        |
+| renderCircle         | 渲染 圆      | position,radius,option | Array,Number,JSON |
+| renderPolygon        | 渲染 面      | dataArr,option         | Array,JSON        |
+| renderInfoWindow     | 渲染 信息窗体   | dataArr                | Array             |
+| openInfoWindow       | 打开 信息窗体   | position               | Array             |
+| clearOverlay         | 清理 覆盖物    |                        |                   |
+
+### 方法参数```dataArr```结构
+
+> 点标记
+
+```json
+[{
+	"position": "坐标数组",
+	"title": "鼠标滑过点标记时的文字提示"
+}]
+```
+
+> 图标标记
+
+```json
+[{
+	"position": "坐标数组",
+	"title": "鼠标滑过点标记时的文字提示",
+	"img": "图片地址",
+	"imgWidth": "图片宽度，默认40",
+	"imgHeight": "图片高度，默认40"
+}]
+```
+
+> 3D圆点标记
+
+```json
+[{
+	"position": "坐标数组",
+	"height": "高度，默认8000",
+	"size": "大小，默认50",
+	"fillColor": "填充颜色，默认#006600"
+}]
+```
+
+> 3D图标标记
+
+```json
+[{
+	"position": "坐标数组",
+	"height": "高度，默认8000",
+	"size": "大小，默认50",
+	"img": "图片地址",
+	"imgWidth": "图片宽度，默认40",
+	"imgHeight": "图片高度，默认40"
+}]
+```
+
+> 线、面
+
+```json
+[{
+	"position": "坐标数组"
+}]
+```
+
+> 信息窗体
+
+```json
+[{
+	"position": "坐标数组",
+	"title": "标题",
+	"content": "内容，文本数组，会以换行进行连接",
+	"width": "窗体宽度",
+	"height": "窗体高度"
+}]
+```
+
+### 方法参数```option```结构
+
+> 线、圆
+
+```json
+{
+	"strokeColor": "边线颜色，默认blue",
+	"strokeWeight": "边线宽度，默认2",
+	"strokeOpacity": "边线透明度，默认0.5"
+}
+```
+
+> 面
+
+```json
+{
+	"strokeColor": "边线颜色，默认blue",
+	"strokeWeight": "边线宽度，默认2",
+	"strokeOpacity": "边线透明度，默认0.5",
+	"fillColor": "填充颜色，默认blue",
+	"fllOpacity": "填充透明度，默认0.5"
+}
+```
diff --git a/snowy-admin-web/src/components/Map/bMap/index.vue b/snowy-admin-web/src/components/Map/bMap/index.vue
new file mode 100644
index 00000000..d369596a
--- /dev/null
+++ b/snowy-admin-web/src/components/Map/bMap/index.vue
@@ -0,0 +1,402 @@
+<template>
+	<div class="bMap">
+		<div :id="`container-${mid}`" style="width: 100%;height: 100%;">
+			地图资源加载中...
+		</div>
+	</div>
+</template>
+<!--BMapGL官网：https://lbsyun.baidu.com/index.php?title=jspopularGL-->
+<script setup name="BMap">
+import {onMounted, onUnmounted, shallowRef} from "vue"
+
+const props = defineProps(
+	{
+		mid: {
+			type: Number,
+			default: new Date().getTime()
+		},
+		apiKey: {
+			type: String,
+			required: true
+		},
+		center: {
+			type: Array
+		},
+		plugins: {
+			type: Array,
+			default: [
+				'BMap.ScaleControl',
+				'BMap.ZoomControl',
+				'BMap.LocationControl',
+				'BMap.NavigationControl3D'
+			]
+		},
+		viewMode: {
+			type: String,
+			default: '3D',
+			validator(value) {
+				return ['2D', '3D'].includes(value)
+			}
+		},
+		rotationAngle: {
+			type: Number,
+			default: 60
+		},
+		tiltAngle: {
+			type: Number,
+			default: 70
+		},
+		zoom: {
+			type: Number,
+			default: 12
+		},
+		mapStyle: {
+			type: String
+		}
+	}
+)
+
+const emits = defineEmits(['complete', 'markerClick'])
+
+const bMap = shallowRef(null)
+const bMapPointArr = ref([])
+const bMapInfoWindowObj = ref({})
+
+const init = () => {
+	// 创建script脚本 引入api
+	const script = document.createElement('script')
+	script.src = `https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=${props.apiKey}&callback=initMap`
+	// 加入head 加载api
+	const head = document.getElementsByTagName('head')[0]
+	head.appendChild(script)
+}
+
+/**
+ * 初始化 地图
+ */
+window.initMap = () => {
+	bMap.value = new BMapGL.Map(`container-${props.mid}`)
+
+	// 滚轮放大缩小
+	bMap.value.enableScrollWheelZoom(true)
+	// 地图样式：个性化地图
+	if (props.mapStyle) {
+		bMap.setMapStyleV2(props.mapStyle)
+	}
+
+	// 控件
+	props.plugins.length > 0 && initControlPlugin()
+
+	// 中心点
+	if (props.center) {
+		setFitView(new BMapGL.Point(props.center[0], props.center[1]))
+
+		// 地图初始化完成
+		emits('complete')
+	} else {
+		// 浏览器定位
+		new BMapGL.Geolocation().getCurrentPosition((r) => {
+			if (r) {
+				setFitView(new BMapGL.Point(r.longitude, r.latitude))
+			} else {
+				console.error('getCurrentPosition fail', r)
+
+				setFitView()
+			}
+
+			// 地图初始化完成
+			emits('complete')
+		})
+	}
+}
+
+/**
+ * 初始化 控制控件
+ */
+const initControlPlugin = () => {
+	// 比例尺
+	props.plugins.includes('BMap.ScaleControl') && bMap.value.addControl(new BMapGL.ScaleControl())
+	// 缩放
+	props.plugins.includes('BMap.ZoomControl') && bMap.value.addControl(new BMapGL.ZoomControl())
+	// 定位
+	props.plugins.includes('BMap.LocationControl') && bMap.value.addControl(new BMapGL.LocationControl())
+	// 3D控件
+	props.plugins.includes('BMap.NavigationControl3D') && bMap.value.addControl(new BMapGL.NavigationControl3D())
+}
+
+/**
+ * 渲染 点标记
+ * @param dataArr
+ */
+const renderMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const point = new BMapGL.Point(d.position[0], d.position[1])
+		const marker = new BMapGL.Marker(
+			// 坐标
+			point,
+			{
+				// 鼠标滑过点标记时的文字提示
+				title: d.title
+			}
+		)
+		marker.addEventListener('click', () => {
+			emits('markerClick', d.position)
+		})
+		bMap.value.addOverlay(marker)
+
+		bMapPointArr.value.push(point)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 图标标记
+ * @param dataArr
+ */
+const renderIconMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const point = new BMapGL.Point(d.position[0], d.position[1])
+		const marker = new BMapGL.Marker(
+			// 坐标
+			point,
+			{
+				// 鼠标滑过点标记时的文字提示
+				title: d.title,
+				// 图标对象
+				icon: new BMapGL.Icon(d.img,
+					new BMapGL.Size(d.imgWidth ? d.imgWidth : 40, d.imgHeight ? d.imgHeight : 40)
+				)
+			}
+		)
+		marker.addEventListener('click', () => {
+			emits('markerClick', d.position)
+		})
+		bMap.value.addOverlay(marker)
+
+		bMapPointArr.value.push(point)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 3D圆点标记
+ * @param dataArr
+ */
+const render3DCircleMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const point = new BMapGL.Point(d.position[0], d.position[1])
+		const marker = new BMapGL.Marker3D(
+			// 坐标
+			point,
+			// 高度，默认8000
+			d.height ? d.height : 8000,
+			// 自定义样式
+			{
+				// 大小，默认50
+				size: d.size ? d.size : 50,
+				// 形状，默认圆形
+				shape: 'BMAP_SHAPE_CIRCLE',
+				// 填充颜色
+				fillColor: d.fillColor ? d.fillColor : '#006600',
+				// 填充透明度
+				fillOpacity: 0.5
+			}
+		)
+		marker.addEventListener('click', () => {
+			emits('markerClick', d.position)
+		})
+		bMap.value.addOverlay(marker)
+
+		bMapPointArr.value.push(point)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 3D图标标记
+ * @param dataArr
+ */
+const render3DIconMarker = (dataArr) => {
+	dataArr.forEach(d => {
+		const point = new BMapGL.Point(d.position[0], d.position[1])
+		const marker = new BMapGL.Marker3D(
+			// 坐标
+			point,
+			// 高度，默认8000
+			d.height ? d.height : 8000,
+			// 自定义样式
+			{
+				// 大小，默认50
+				size: d.size ? d.size : 50,
+				// 图标对象
+				icon: new BMapGL.Icon(d.img,
+					new BMapGL.Size(d.imgWidth ? d.imgWidth : 40, d.imgHeight ? d.imgHeight : 40)
+				)
+			}
+		)
+		marker.addEventListener('click', () => {
+			emits('markerClick', d.position)
+		})
+		bMap.value.addOverlay(marker)
+
+		bMapPointArr.value.push(point)
+	})
+
+	setFitView()
+}
+
+/**
+ * 渲染 线
+ * @param dataArr
+ * @param option
+ */
+const renderPolyline = (dataArr, option = {}) => {
+	dataArr.forEach(d => {
+		bMapPointArr.value.push(new BMapGL.Point(d.position[0], d.position[1]))
+	})
+
+	const polyline = new BMapGL.Polyline(bMapPointArr.value, {
+		stokeStyle: 'solid',
+		strokeColor: option.strokeColor || 'blue',
+		strokeWeight: option.strokeWeight || 2,
+		strokeOpacity: option.strokeOpacity || 0.5
+	})
+	bMap.value.addOverlay(polyline)
+
+	setFitView()
+}
+
+/**
+ * 渲染 圆
+ * @param position
+ * @param radius
+ * @param option
+ */
+const renderCircle = (position, radius, option = {}) => {
+	const point = new BMapGL.Point(position[0], position[1])
+	bMapPointArr.value.push(point)
+
+	const circle = new BMapGL.Circle(
+		point,
+		radius ? radius : 500,
+		{
+			strokeColor: option.strokeColor || 'blue',
+			strokeWeight: option.strokeWeight || 2,
+			strokeOpacity: option.strokeOpacity || 0.5
+		})
+	bMap.value.addOverlay(circle)
+
+	setFitView()
+}
+
+/**
+ * 渲染 面
+ * @param dataArr
+ * @param option
+ */
+const renderPolygon = (dataArr, option = {}) => {
+	dataArr.forEach(d => {
+		bMapPointArr.value.push(new BMapGL.Point(d.position[0], d.position[1]))
+	})
+
+	const polygon = new BMapGL.Polygon(bMapPointArr.value, {
+		stokeStyle: 'solid',
+		strokeColor: option.strokeColor || 'blue',
+		strokeWeight: option.strokeWeight || 2,
+		strokeOpacity: option.strokeOpacity || 0.5,
+		fillColor: option.fillColor || 'blue',
+		fllOpacity: option.fllOpacity || 0.5
+	})
+	bMap.value.addOverlay(polygon)
+
+	setFitView()
+}
+
+/**
+ * 设置 视图级别
+ * @param point
+ */
+const setFitView = (point) => {
+	if (!point) {
+		const viewPort = bMap.value.getViewport(bMapPointArr.value)
+		point = new BMapGL.Point(viewPort.center.lng, viewPort.center.lat)
+	}
+	bMap.value.centerAndZoom(point, props.zoom)
+
+	// 3D视图
+	if (props.viewMode === '3D') {
+		// 地图旋转角度
+		bMap.value.setHeading(props.rotationAngle)
+		// 地图倾斜角度
+		bMap.value.setTilt(props.tiltAngle)
+	}
+}
+
+/**
+ * 渲染 信息窗体
+ * @param dataArr
+ */
+const renderInfoWindow = (dataArr) => {
+	dataArr.forEach(d => {
+		bMapInfoWindowObj.value[d.position] = new BMapGL.InfoWindow(
+			d.content.join('<br>'),
+			{
+				title: d.title,
+				width: d.width ? d.width : 250,
+				height: d.height ? d.height : 100
+			}
+		)
+	})
+}
+
+/**
+ * 打开 信息窗体
+ * @param position
+ */
+const openInfoWindow = (position) => {
+	const infoWindow = bMapInfoWindowObj.value[position]
+	if (infoWindow) {
+		bMap.value.openInfoWindow(infoWindow, new BMapGL.Point(position[0], position[1]))
+	}
+}
+
+/**
+ * 清理 覆盖物
+ */
+const clearOverlay = () => {
+	bMap.value.clearOverlays()
+}
+
+onMounted(() => {
+	init()
+})
+
+onUnmounted(() => {
+	bMap.value && bMap.value.destroy()
+})
+
+defineExpose({
+	renderMarker,
+	renderIconMarker,
+	render3DCircleMarker,
+	render3DIconMarker,
+	renderPolyline,
+	renderCircle,
+	renderPolygon,
+	renderInfoWindow,
+	openInfoWindow,
+	clearOverlay
+})
+</script>
+
+<style lang="less">
+.bMap {
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 800px;
+}
+</style>
diff --git a/snowy-admin-web/src/views/exm/map/bMap.vue b/snowy-admin-web/src/views/exm/map/bMap.vue
new file mode 100644
index 00000000..da274f32
--- /dev/null
+++ b/snowy-admin-web/src/views/exm/map/bMap.vue
@@ -0,0 +1,130 @@
+<template>
+	<b-map ref="map" api-key="NtTydKuftIVXAy526uWXZoHS86lg0KeW" @complete="handleComplete"
+		   @marker-click="handleMarkerClick"></b-map>
+</template>
+
+<script setup name="exmBMap">
+import BMap from '@/components/Map/bMap/index.vue'
+
+const map = ref(null)
+
+
+const handleComplete = () => {
+	console.log('complete')
+
+	// 点标记
+	map.value.renderMarker(
+		[
+			{
+				position: [116.39, 39.9],
+				title: 'BI'
+			},
+			{
+				position: [116.33, 39.5],
+				title: 'BI-2'
+			}
+		]
+	)
+	// 图标点标记
+	// map.value.renderIconMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			title: 'BI',
+	// 			img: 'https://webmap0.bdimg.com/image/api/bg.png',
+	// 			imgWidth: 40,
+	// 			imgHeight: 40
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			title: 'BI-2',
+	// 			img: 'https://webmap0.bdimg.com/image/api/bg.png'
+	// 		}
+	// 	]
+	// )
+	// 3D圆点标记
+	// map.value.render3DCircleMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			height: 7000,
+	// 			size: 40
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			height: 7000,
+	// 			size: 40
+	// 		}
+	// 	]
+	// )
+	// 3D图标标记
+	// map.value.render3DIconMarker(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9],
+	// 			height: 7000,
+	// 			size: 40,
+	// 			img: 'https://webmap0.bdimg.com/image/api/bg.png',
+	// 			imgWidth: 40,
+	// 			imgHeight: 40
+	// 		},
+	// 		{
+	// 			position: [116.33, 39.5],
+	// 			height: 7000,
+	// 			img: 'https://webmap0.bdimg.com/image/api/bg.png'
+	// 		}
+	// 	]
+	// )
+	// 面
+	// map.value.renderPolygon(
+	// 	[
+	// 		{
+	// 			position: [116.39, 39.9]
+	// 		},
+	// 		{
+	// 			position: [116.47, 39.8]
+	// 		},
+	// 		{
+	// 			position: [116.46, 39.7]
+	// 		},
+	// 		{
+	// 			position: [116.35, 39.6]
+	// 		}
+	// 	]
+	// )
+	// 信息窗体
+	map.value.renderInfoWindow(
+		[
+			{
+				position: [116.39, 39.9],
+				title: 'Snowy-小诺开源技术',
+				content: [
+					"<div style='padding:0'>",
+					"网站 : https://www.xiaonuo.vip",
+					"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
+				]
+			},
+			{
+				position: [116.33, 39.5],
+				title: 'Snowy-小诺开源技术',
+				content: [
+					"<div style='padding:0'>",
+					"网站 : https://www.xiaonuo.vip",
+					"Snowy是一款国内首例国产密码算法加密框架，采用Vue3.0+AntDesignVue3.0+SpringBoot2.8前后分离技术打造，技术框架与密码的结合，让前后分离‘密’不可分！</div>"
+				],
+				width: 300,
+				height: 200
+			}
+		]
+	)
+}
+
+const handleMarkerClick = (position) => {
+	map.value.openInfoWindow(position)
+
+	console.log('marker click', position)
+}
+</script>
+
+<style lang="less">
+</style>