Google maps Jquery Mobile上的奇数映射错误_Google Maps_Jquery Mobile

Google maps Jquery Mobile上的奇数映射错误

google-maps jquery-mobile

Google maps Jquery Mobile上的奇数映射错误,google-maps,jquery-mobile,Google Maps,Jquery Mobile,我在jQuerymobile中看到我的google地图有一个奇怪的行为，问题是当地图加载时，它不会在画布上扩展自己。。与其继续解释： //当地图页面打开时，获取位置并显示地图 $（“#映射页”）.live（'pagecreate'，function（）{ 初始化映射（42，-73）； }); 功能初始化映射（lat、lng）{ var latlng=新的google.maps.latlng（lat，lng）；变量myOptions={ 缩放：8，中心：拉特林， mapTypeId

我在jQuerymobile中看到我的google地图有一个奇怪的行为，问题是当地图加载时，它不会在画布上扩展自己。。与其继续解释：


//当地图页面打开时，获取位置并显示地图
$（“#映射页”）.live（'pagecreate'，function（）{
初始化映射（42，-73）；
});
功能初始化映射（lat、lng）{
var latlng=新的google.maps.latlng（lat，lng）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
主页
地图页

看起来

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

变量污染全局范围）

演示在

谢谢！我把“live”改为：$（document）。在（'pageshow'，'#map page'，function（）{最好限制到spacific页面。我看了你的演示代码，只是想解决这个问题。

<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>

        (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);
            }
        }());