Jquery 移动设备上的奇怪地图错误

Question

我的 google 地图在 jQuerymobile 中有一个奇怪的行为，问题是当地图加载时它不会在整个 canvas.. 而不是继续尝试解释：

http://jsfiddle.net/yonarbel/x5nbtpgo/4/

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        // When map page opens get location and display map
        $('#map-page').live('pagecreate', function() {
            initializeMap(42, -73);
        });

        function initializeMap(lat, lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>

<body>
    <div data-role="page" id="home">
        <div data-role="header">
             <h1>Home Page</h1>

        </div>
        <div data-role="content"> <a href="#map-page">go to Map page</a>

        </div>
    </div>
    <div data-role="page" id="map-page">
        <div data-role="header">
             <h1>Map Page</h1>

        </div>
        <div data-role="content">
            <div id="map_canvas" style="width: 400px; height: 400px"></div>
        </div>
    </div>
</body>

Answer 1

看起来 pagecreate 不够..

您应该在 pageshow 事件

上触发地图上的 resize 事件（ 这使得它重新计算大小 ）

        (function(){
            var map;

            // When map page opens get location and display map
            $('#map-page').live('pageshow', function() {
                initializeMap(42, -73);
            });
            $('#map-page').live('pageshow',function(){
                google.maps.event.trigger(map, 'resize');
            });
            function initializeMap(lat, lng) {
                var latlng = new google.maps.LatLng(lat, lng);
                var myOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }
        }());

（在 IIFE 中插入了所有代码以避免 map 变量 污染全局范围）

演示在 http://jsfiddle.net/gaby/x5nbtpgo/6/

Jquery 移动设备上的奇怪地图错误

Odd Map bug on Jquery Mobile

google-maps

jquery-mobile