uniapp中，首先显示一个大的地图，点击地图上的点，缩小地图并且在下方显示地图上的点对应的内容

<template>
    <view class="content">
        <map id="map" :style="{ width: '100%', height: selectedMarker.title?'50vh':'76vh',zIndex:'500' }" :markers="markers" :longitude="longitude"
            :latitude="latitude" :scale="scale" @markertap="markerTap">
        </map>
        <view class="info-view" :style="{ visibility: selectedMarker.title ? 'visible' : 'hidden' }" style="position:fixed;bottom:17vw;width: 95%;">
            <view class="flex justify-between padding">
                <view class="flex">
                    <image src="../../static/moren.jpeg" mode="" class="alarm_iamge"></image>
                    <view class="flex flex-direction justify-between align-center">
                        <span class="alarm_name text-bold">{{ selectedMarker.name }}</span>
                        <span>【{{ selectedMarker.zhuang }}】</span>
                    </view>
                </view>
                <view class="">
                    <view class="flex align-center justify-between">
                        <span class="text-bold">{{ selectedMarker.dian }}%</span>
                        <image class="Personnel_image" src="../../static/DL.png" mode=""></image>
                    </view>
                    <view class="flex align-center  justify-between">
                        <span class="text-bold">{{ selectedMarker.wen }}°C</span>
                        <image class="Personnel_image" src="../../static/WDJ-01.png" mode=""></image>
                    </view>
                </view>

            </view>
            <view class="flex justify-between">
                <view class="padding" style="background-color: azure;width: 75%;border-radius: 5px;">
                    <view class="flex justify-between margin-bottom-sm">
                        <view class="flex align-center">
                            <image class="Personnel_image margin-right-xs" src="../../static/heart.png" mode=""></image>
                            <span class="text-bold">心率：{{ selectedMarker.xinlv }}(次/分)</span>
                        </view>
                        <view class="flex align-center">
                            <image class="Personnel_image margin-right-xs" src="../../static/XY-copy.png" mode="">
                            </image>
                            <span class="text-bold">血氧：{{ selectedMarker.xueyang }}%</span>
                        </view>
                    </view>
                    <view class="flex justify-between margin-bottom-sm">
                        <view class="flex align-center">
                            <image class="Personnel_image margin-right-xs" src="../../static/BS.png" mode=""></image>
                            <span class="text-bold">步数：{{ selectedMarker.steps }}</span>
                        </view>
                        <view class="flex align-center">
                            <image class="Personnel_image margin-right-xs" src="../../static/SM.png" mode=""></image>
                            <span class="text-bold">睡眠：{{ selectedMarker.sleep }}</span>
                        </view>
                    </view>
                    <view class="flex justify-between">
                        <view class="flex align-center">
                            <image class="Personnel_image margin-right-xs" src="../../static/SSYSZY.png" mode="">
                            </image>
                            <span class="text-bold">血压：{{ selectedMarker.xueya}}mmHg</span>
                        </view>
                    </view>
                </view>
                <view class="flex justify-center align-center"
                    style="width:20%;background-color: darkseagreen;border-radius: 5px;color: white;">
                    <span>导航</span>
                </view>
            </view>
        </view>
        <!-- <view class="debug-info">
            {{ debugInfo }}
        </view> -->
    </view>
</template>

<script>
    export default {
        name: 'HomeMap',
        data() {
            return {
                longitude: 116.397128,
                latitude: 39.916527,
                scale: 10,
                debugInfo: '', // 用于存储调试信息
                markers: [{
                    id: 0,
                    longitude: 116.397128,
                    latitude: 39.916527,
                    iconPath: '/static/logo/58x58.png',
                    width: 50,
                    height: 50,
                    title: '天安门',
                    description: '这是中国北京的中心地标之一。',
                    image: '/static/mmmoren.jpeg',
                    name: '张三',
                    zhuang: '在线',
                    dian: '75',
                    wen: '36.5',
                    xinlv: '78',
                    xueyang: '98',
                    xueya: '120/80',
                    steps: '5600',
                    sleep: '良好'
                }, {
                    id: 1,
                    longitude: 116.402854, // 经度值：北京国家体育场
                    latitude: 39.99285, // 纬度值：北京国家体育场
                    iconPath: '/static/logo/58x58.png',
                    width: 50,
                    height: 50,
                    title: '北京国家体育场',
                    description: '俗称“鸟巢”，是2008年北京奥运会的主体育场。',
                    image: '/static/logo.png',
                    name: '李四',
                    zhuang: '在线',
                    dian: '75',
                    wen: '36.5',
                    xinlv: '78',
                    xueyang: '98',
                    xueya: '120/80',
                    steps: '5600',
                    sleep: '良好'
                }],
                selectedMarker: {},
            };
        },
        methods: {
            markerTap(e) {
                const markerId = e.detail.markerId; // 从事件对象中获取 markerId
                this.debugInfo = `Marker ID: ${markerId}`;
                const marker = this.markers.find(marker => marker.id === markerId);
                if (marker) {
                    this.debugInfo += ` | Found marker: ${marker.title}`;
                    this.selectedMarker = marker; // 更新选中的标记点数据

                } else {
                    this.debugInfo += ' | No marker found';
                    this.selectedMarker = {};
                }
            },
        },
    };
</script>

<style>
    .content {
        width: 100%;
        height: 100vh;
        position: relative;

    }



    .info-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .info-description {
        font-size: 16px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* 保证在单词中间换行 */
    }

    .debug-info {

        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
        text-align: center;
    }


    .info-view {    
        border: 1px solid black;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
</style>