Question

我在jQuerymobile中得到了我的谷歌地图的一个奇怪的行为，问题是当地图加载它没有在画布上扩展自己.. 而不是继续尝试解释：

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还不够......

您应该在resize事件

上触发地图上的pageshow事件（，使其重新计算尺寸）

        (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 Mobile上的奇怪地图错误

1 个答案: