高德地图侧边栏隐藏后，地图宽度无法自动调整怎么办？

高德地图的侧边栏隐藏后，地图宽度无法自动调整的问题，通常是由于CSS样式或JavaScript逻辑未正确处理侧边栏隐藏后的布局变化。以下是一些可能的解决方案：

1. 检查CSS样式

确保地图容器的宽度能够根据侧边栏的隐藏状态自动调整。你可以使用CSS的flex布局或calc()函数来实现这一点。

#map-container {
    display: flex;
    height: 100vh;
}

#sidebar {
    width: 300px; /* 侧边栏宽度 */
    transition: width 0.3s;
}

#map {
    flex: 1;
    transition: margin-left 0.3s;
}

/* 当侧边栏隐藏时 */
#sidebar.hidden {
    width: 0;
}

#map.full-width {
    margin-left: 0;
}

2. 使用JavaScript动态调整地图宽度

在侧边栏隐藏时，手动调整地图的宽度。你可以通过监听侧边栏的隐藏事件，然后动态设置地图的宽度。

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const map = document.getElementById('map');

    sidebar.classList.toggle('hidden');
    map.classList.toggle('full-width');

    // 强制地图重新渲染
    if (window.map) {
        window.map.setFitView();
    }
}

3. 使用高德地图的resize方法

高德地图提供了resize方法，可以在容器大小变化时调用，以确保地图能够正确调整大小。

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const map = document.getElementById('map');

    sidebar.classList.toggle('hidden');
    map.classList.toggle('full-width');

    // 强制地图重新调整大小
    if (window.map) {
        window.map.resize();
    }
}

4. 确保布局变化后调用resize

如果你使用了某些动画或过渡效果来隐藏侧边栏，确保在动画结束后调用resize方法。

function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const map = document.getElementById('map');

    sidebar.classList.toggle('hidden');
    map.classList.toggle('full-width');

    // 在动画结束后调用resize
    setTimeout(() => {
        if (window.map) {
            window.map.resize();
        }
    }, 300); // 300ms是动画的持续时间
}

5. 使用MutationObserver监听DOM变化

如果你无法直接控制侧边栏的隐藏逻辑，可以使用MutationObserver来监听DOM变化，并在侧边栏隐藏时自动调整地图大小。

const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.attributeName === 'class') {
            if (window.map) {
                window.map.resize();
            }
        }
    }
});

const sidebar = document.getElementById('sidebar');
observer.observe(sidebar, { attributes: true });

总结

通过以上方法，你可以确保在高德地图的侧边栏隐藏后，地图宽度能够自动调整。具体选择哪种方法取决于你的项目结构和需求。