点击按钮切换Aura组件地图高度与列表显示的异常问题排查

我看你已经搭建了切换的基础框架，但几个细节问题导致地图全屏后只显示标记、没有背景，咱们一步步来修复：

1. 修正Aura组件的HTML结构 #

原代码存在多余的闭合</div>，先理顺结构，同时用Aura规范的方式引用容器元素，避免直接操作原生DOM：

<aura:component >
    <aura:attribute name="map" type="Object"/>
    <aura:attribute name="buttonstate" type="Boolean" default="false"/>
    
    <div aura:id="screen">
        <div id="map" aura:id="mapContainer" class="mapSize" style="position:relative;">
            <lightning:button class="button" aura:id="toggleButton" label="Enter Fullscreen" onclick="{!c.handleClick}" />
        </div>
    </div>
    
    <div aura:id="listContainer" class="listDiv">
        <c:List />
    </div>
</aura:component>

2. 修复CSS样式问题 #

原CSS的类作用域、属性不全，全屏时需要同时铺满宽高，还要确保容器占满视口：

/* 初始地图尺寸 */
.THIS .mapSize {
    width: 100%;
    height: 80vh; /* 用vh单位更适配视口高度 */
    background-color: #f3f3f3; /* 添加默认背景，避免无地图内容时空白 */
    transition: all 0.3s ease; /* 添加入场过渡动画 */
}

/* 全屏地图尺寸 */
.THIS .mapFullscreen {
    width: 100vw;
    height: 100vh;
    position: fixed; /* 固定定位确保铺满整个屏幕 */
    top: 0;
    left: 0;
    z-index: 999; /* 避免被其他页面元素遮挡 */
    background-color: #f3f3f3;
}

/* 列表容器样式 */
.THIS .listDiv {
    height: 20vh;
    transition: all 0.3s ease;
}

3. 优化JavaScript控制器 #

改用Aura原生方法操作元素，同时添加地图重绘逻辑（多数地图库需要手动触发resize适配新尺寸）：

handleClick : function(component, event, helper) {
    const toggleBtn = event.getSource();
    const listContainer = component.find('listContainer');
    const mapContainer = component.find('mapContainer');
    let isFullscreen = component.get('v.buttonstate');

    if (!isFullscreen) {
        // 切换到全屏模式
        toggleBtn.set('v.label', 'Exit Fullscreen');
        $A.util.addClass(listContainer, 'slds-hide'); // 用Salesforce官方隐藏类更规范
        $A.util.removeClass(mapContainer, 'mapSize');
        $A.util.addClass(mapContainer, 'mapFullscreen');
        
        // 触发地图重绘，适配新尺寸
        helper.resizeMap(component);
    } else {
        // 恢复初始模式
        toggleBtn.set('v.label', 'Enter Fullscreen');
        $A.util.removeClass(listContainer, 'slds-hide');
        $A.util.removeClass(mapContainer, 'mapFullscreen');
        $A.util.addClass(mapContainer, 'mapSize');
        
        helper.resizeMap(component);
    }

    component.set('v.buttonstate', !isFullscreen);
}

4. 新增Helper方法处理地图重绘 #

在Helper中添加适配不同地图库的resize逻辑（这里覆盖了常用的Leaflet和Google Maps，你可以根据实际使用的库调整）：

resizeMap : function(component) {
    const mapInstance = component.get('v.map');
    
    if (mapInstance) {
        // Leaflet地图适配逻辑
        if (mapInstance.invalidateSize) {
            mapInstance.invalidateSize();
        }
        // Google Maps地图适配逻辑
        else if (google?.maps && mapInstance.fitBounds) {
            const bounds = mapInstance.getBounds();
            google.maps.event.trigger(mapInstance, 'resize');
            mapInstance.fitBounds(bounds);
        }
        // 其他地图库请对应修改resize逻辑
    }
}

关键修复点说明 #

• 样式作用域：Aura组件的CSS必须以.THIS开头，确保样式只作用于当前组件，原代码的.cAccountMap属于错误的命名空间引用；
• 全屏适配：用vw/vh单位+固定定位，确保地图容器完全铺满屏幕，同时添加背景色避免空白；
• DOM操作规范：用Aura的find和$A.util方法操作元素，替代原生DOM操作，避免破坏Aura的组件生命周期；
• 地图重绘：大多数地图库不会自动感知容器尺寸变化，必须手动触发resize事件，否则会出现只有标记、没有地图底图的情况。

内容的提问来源于stack exchange，提问作者cUser