【更新】地图容器高度 调整为 props属性，默认800

snowy-admin-web/src/components/Map/baiduMap/README.md

@@ -7,8 +7,13 @@ BMap
 
 ### 使用方式
 
-```vue
+```text
+申请key
+```
 
+访问 [百度地图官网](https://lbsyun.baidu.com/apiconsole/center#/home) 注册账号，申请应用获得key
+
+```vue
 <template>
 	<baidu-map ref="map" api-key="******" @complete="handleComplete"
 				   @marker-click="handleMarkerClick" />
@@ -48,17 +53,18 @@ BMap
 
 ### Prop属性
 
-| 名称            | 说明           | 类型     | 默认值  |
+| 名称            | 说明         | 类型     | 默认值      |
-|---------------|--------------|--------|------|
+|---------------|------------|--------|----------|
-| mid           | 容器ID         | String | 时间戳  |
+| mid           | 容器ID       | String | 时间戳      |
-| apiKey        | 地图Key        | String |      |
+| height        | 容器高度       | Number | 800，单位px |
-| center        | 地图中心点        | String | 自动定位 |
+| apiKey        | 地图Key      | String |          |
-| plugins       | 地图控件         | Array  |      |
+| center        | 地图中心点      | String | 自动定位     |
-| viewMode      | 效果：2D，3D     | String | 3D   |
+| plugins       | 地图控件       | Array  |          |
-| rotationAngle | 旋转角度         | Number | 60   |
+| viewMode      | 效果：2D，3D   | String | 3D       |
-| tiltAngle     | 倾斜角度         | Number | 70   |
+| rotationAngle | 旋转角度       | Number | 60       |
-| zoom          | 地图缩放比例       | Number | 12   |
+| tiltAngle     | 倾斜角度       | Number | 70       |
-| mapStyle      | 地图样式：个性化地图   | String |      |
+| zoom          | 地图缩放比例     | Number | 12       |
+| mapStyle      | 地图样式：个性化地图 | String |          |
 
 #### 地图控件
 

snowy-admin-web/src/components/Map/baiduMap/index.vue

@@ -1,16 +1,21 @@
 <template>
-	<div class="baiduMap">
+	<div class="baiduMap" :style="{height: `${height}px`}">
 		<div :id="`container-${mid}`" style="width: 100%; height: 100%">地图资源加载中...</div>
 	</div>
 </template>
 <!--BMapGL官网：https://lbsyun.baidu.com/index.php?title=jspopularGL-->
 <script setup name="baiduMap">
 	import { onMounted, onUnmounted, shallowRef } from 'vue'
+
 	const props = defineProps({
 		mid: {
 			type: Number,
 			default: new Date().getTime()
 		},
+		height: {
+			type: Number,
+			default: 800
+		},
 		apiKey: {
 			type: String,
 			required: true
@@ -50,6 +55,7 @@
 	const baiduMap = shallowRef(null)
 	const baiduMapPointArr = ref([])
 	const baiduMapInfoWindowObj = ref({})
+
 	const init = () => {
 		// 创建script脚本 引入api
 		const script = document.createElement('script')
@@ -58,7 +64,10 @@
 		const head = document.getElementsByTagName('head')[0]
 		head.appendChild(script)
 	}
-	// 初始化 地图
+
+	/**
+	 * 初始化 地图
+	 */
 	window.initMap = () => {
 		baiduMap.value = new BMapGL.Map(`container-${props.mid}`)
 		// 滚轮放大缩小
@@ -88,7 +97,10 @@
 			})
 		}
 	}
-	// 初始化 控制控件
+
+	/**
+	 * 初始化 控制控件
+	 */
 	const initControlPlugin = () => {
 		// 比例尺
 		props.plugins.includes('BMap.ScaleControl') && baiduMap.value.addControl(new BMapGL.ScaleControl())
@@ -99,7 +111,11 @@
 		// 3D控件
 		props.plugins.includes('BMap.NavigationControl3D') && baiduMap.value.addControl(new BMapGL.NavigationControl3D())
 	}
-	// 渲染 点标记
+
+	/**
+	 * 渲染 点标记
+	 * @param dataArr
+	 */
 	const renderMarker = (dataArr) => {
 		dataArr.forEach((d) => {
 			const point = new BMapGL.Point(d.position[0], d.position[1])
@@ -359,6 +375,5 @@
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		height: 800px;
 	}
 </style>

snowy-admin-web/src/components/Map/gaodeMap/README.md

@@ -7,6 +7,12 @@ AMap
 
 ### 使用方式
 
+```text
+申请key
+```
+
+访问 [高德地图官网](https://console.amap.com/dev/index) 注册账号，申请应用获得key
+
 ```vue
 
 <template>
@@ -48,17 +54,18 @@ AMap
 
 ### Prop属性
 
-| 名称            | 说明                  | 类型      | 默认值    |
+| 名称            | 说明                | 类型       | 默认值       |
-|---------------|---------------------|---------|--------|
+|---------------|-------------------|----------|-----------|
-| mid           | 容器ID                | String  | 时间戳    |
+| mid           | 容器ID              | String   | 时间戳       |
-| apiKey        | 地图Key               | String  |        |
+| height        | 容器高度              | Number   | 800，单位px  |
-| center        | 地图中心点               | String  | 自动定位   |
+| apiKey        | 地图Key             | String   |           |
-| plugins       | 地图控件                | Array   |        |
+| center        | 地图中心点             | String   | 自动定位      |
-| viewMode      | 效果：2D，3D            | String  | 3D     |
+| plugins       | 地图控件              | Array    |           |
-| zoom          | 地图缩放比例              | Number  | 12     |
+| viewMode      | 效果：2D，3D          | String   | 3D        |
-| pitch         | 地图俯仰角度，有效范围 0-83    | String  | 50     |
+| zoom          | 地图缩放比例            | Number   | 12        |
-| mapStyle      | 地图样式                | String  | normal |
+| pitch         | 地图俯仰角度，有效范围 0-83  | String   | 50        |
-| markerCluster | 点聚合                 | Boolean | true   |
+| mapStyle      | 地图样式              | String   | normal    |
+| markerCluster | 点聚合               | Boolean  | true      |
 
 #### 地图控件
 

snowy-admin-web/src/components/Map/gaodeMap/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="gaodeMap">
+	<div class="gaodeMap" :style="{height: `${height}px`}">
 		<div :id="`container-${mid}`" style="width: 100%; height: 100%">地图资源加载中...</div>
 	</div>
 </template>
@@ -13,6 +13,10 @@
 			type: Number,
 			default: new Date().getTime()
 		},
+		height: {
+			type: Number,
+			default: 800
+		},
 		apiKey: {
 			type: String,
 			required: true
@@ -392,7 +396,6 @@
 		padding: 0;
 		margin: 0;
 		width: 100%;
-		height: 800px;
 
 		input[type='radio'] {
 			-webkit-appearance: radio;