关于 uniapp 中地图 marker 的自定义气泡 customCallout 文字不换行的问题

用uniapp实现customCallout自定义气泡的时候，由于文字太长超出遮盖住，无法显示完整。解决办法如下：

<cover-view>中的文字超过会隐藏。

这里文字需要换行的地方加上 ：white-space:pre-wrap;

white-space ：控制段落中的文本是否换行。

pre-wrap：保留空格序列，正常进行换行。

normal，不保留空格，直接换行

以下是页面的完整代码：

<template>
	<view class="page-body">
		<view class="page-section">
			<map id="map1" class="mapstyle" ref="map1" style="width: 100%; height: 100%;" :markers="markers"
				:latitude="latitude" :longitude="longitude" :scale="mapScale" @markertap="markertap">
				<cover-view slot="callout">
					<block v-for="(item, index) in customCalloutMarkerIds" :key="index">
						<cover-view class="customCallout" :marker-id="item">
							<cover-view class="content">
								<cover-view
									style="font-size: 14px;background-color: white;border: 1px #0d6c6c solid;border-radius: 5px;color: #0d6c6c;">
									<cover-view style="margin: 5px;padding: 3px 5px;border-bottom: 1px #0d6c6c solid;">
										设备编号：2534534534</cover-view>
									<cover-view style="margin: 5px;padding: 3px 5px;">定位时间：2023.01.01 09:43</cover-view>
									<cover-view style="margin: 5px;padding: 3px 5px;">停留时间：2023.01.01 09:43</cover-view>
									<cover-view style="margin: 5px;padding: 3px 5px;">定位时速：1.27km/h</cover-view>
									<cover-view style="margin: 5px;padding: 3px 5px;white-space:pre-wrap;">定位位置：广东省深圳市南山区科技三中路大查查大厦D栋1905
									</cover-view>
									<cover-view style="margin: 5px;padding: 3px 5px;">定位位置：广东省深圳市南山区给给发个给大厦G栋
									</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</map>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				latitude: 30.17489176432292,
				longitude: 120.2113267686632,
				markers: [{
					id: 1,
					latitude: 30.174892900,
					longitude: 120.2113275343,
					iconPath: '../../../static/img/wz.png',
					width: 30,
					height: 30,
					stationName: '',
					distance: 10,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: 'ALWAYS',
					}
				}, {
					id: 2,
					latitude: 30.174894900,
					longitude: 120.2133285343,
					iconPath: '../../../static/img/wz.png',
					width: 30,
					height: 30,
					stationName: '',
					distance: 20,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: 'NONE',
					}
				}, {
					id: 3,
					latitude: 30.172792900,
					longitude: 120.2133285343,
					iconPath: '../../../static/img/wz.png',
					width: 30,
					height: 30,
					stationName: '',
					distance: 30,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: 'NONE',
					},
				}], // 地图上markers列表
				customCalloutMarkerIds: [1, 2, 3],
				mapScale: 16, // 地图默认放大倍数
			}
		},
		methods: {
			markertap(e) {
				const that = this
				let markers = this.markers
				markers.find(function(item, index) {
					if (item.id == e.markerId) {
						that.swiperCurrent = index // 点击marker 实现底部滑到相对应的站点
						item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名
						item.width = 35
						item.height = 35
					} else {
						item.customCallout.display = 'NONE'
						item.width = 25
						item.height = 25
					}
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.page-body {
		width: 100%;
		height: 100%;
		position: absolute;
		overflow: hidden;

		.page-section {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.customCallout {
			width: 75%;
			box-sizing: border-box;
			border-radius: 4rpx;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}

	.mapstyle {
		position: relative;
	}
</style>

下面是效果：