当用户在jquery mobile中向上或向下滑动时调整Google Maps div的大小

jQuery Mobile 中调整 Google Maps Div 大小的解决方案

基础概念

在 jQuery Mobile 应用中集成 Google Maps 时，经常会遇到地图容器 div 在滑动时大小不正确的问题。这是由于 jQuery Mobile 的页面过渡动画和 Google Maps 的尺寸计算机制之间的交互问题导致的。

问题原因

页面过渡动画：jQuery Mobile 使用 CSS 过渡动画来平滑切换页面，这会导致地图容器在动画过程中尺寸计算不准确
延迟渲染：Google Maps 在容器尺寸变化后不会自动重新计算和调整
视口单位问题：使用百分比或视口单位(vh/vw)时，在移动设备上可能出现计算错误

解决方案

方法1：使用 resize 事件触发地图重绘

$(document).on("pagecontainershow", function() {
    // 初始化地图
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    
    // 监听页面过渡完成事件
    $(window).on("resize", function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter({lat: -34.397, lng: 150.644});
    });
});

方法2：使用 jQuery Mobile 页面事件

$(document).on("pageshow", "#map-page", function() {
    // 确保地图容器已完全显示
    setTimeout(function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    }, 300);
});

方法3：CSS 解决方案

确保地图容器有明确的尺寸：

#map-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

方法4：使用 orientationchange 事件处理旋转

$(window).on("orientationchange", function() {
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

最佳实践

延迟初始化：在页面完全显示后再初始化地图
响应式设计：使用 CSS 确保地图容器始终填满可用空间
事件处理：监听所有可能导致尺寸变化的事件（resize, orientationchange, pageshow）
性能优化：使用 setTimeout 延迟重绘以避免过度触发

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile with Google Maps</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
        #map-page, #map-canvas {
            width: 100%;
            height: 100%;
            padding: 0;
        }
        #map-canvas {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div data-role="page" id="map-page">
        <div data-role="header">
            <h1>Google Maps</h1>
        </div>
        <div role="main" class="ui-content">
            <div id="map-canvas"></div>
        </div>
    </div>

    <script>
        var map, center = {lat: -34.397, lng: 150.644};
        
        $(document).on("pagecontainershow", function() {
            // 初始化地图
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: center,
                zoom: 8
            });
            
            // 监听各种可能导致尺寸变化的事件
            $(window).on("resize orientationchange", function() {
                setTimeout(function() {
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center);
                }, 300);
            });
        });
        
        // 页面显示后触发一次重绘
        $(document).on("pageshow", "#map-page", function() {
            setTimeout(function() {
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            }, 500);
        });
    </script>
</body>
</html>