Question

我正在尝试在JQuery Mobile页面上显示Google地图，但每次加载页面时都难以正确显示它。

我有两个主要页面正在运作：

的index.php
map.php

从index.php加载网站然后切换到导航栏中的map.php时，地图会第一次加载。切换回index.php然后再返回map.php，地图的中心在左上方加载，直到触摸屏幕时才会显示完整的地图（但是，计算机的浏览器都不会出现这种情况）。但是，如果我首先加载map.php，那么地图会在任何页面来回变换时保持不变。

我的测试网站是http://beersandears.net/mbeta/

关于我失踪的任何想法？我已经从互联网上的研究中得到了这一点，但我所尝试的并没有帮助解决这个问题，包括：

第三个看起来与我的问题非常相似，但使用“pageshow”的解决方案无效。

以下是map.php的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBtVQWtkD4MjJ3zbe9DXgPqSlC2XDn5K7c&sensor=true" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style type="text/css">
img {
    max-width:100%;
    height:auto;
}
</style>
</head>
<body>
<div id="wrapper" data-role="page" id="map_page">
    <div id="header" data-role="header" data-position="fixed" data-id="head">
        <h1>WDW Map</h1>
    </div><!-- end header -->
    <div id="map_canvas" data-role="content">
    </div><!-- end content -->

<div id="footer" data-id="navbar" data-role="footer" data-position="fixed"> 
    <div id="navbar" data-role="navbar">
        <ul>
            <li><a href="index.php">WDW Beer List</a></li>
            <li><a href="map.php">WDW Map</a></li>
            <li><a href="blog.php">Articles</a></li>
        </ul>
    </div><!-- end navbar -->
</div><!-- end footer -->
<script type="text/javascript">
        $(function(){
            initializeMap(28.385208623548024,-81.56713485717773);
        });

        function initializeMap(lat,lng) {
            var adjustedHeight = ($(window).height());
            $('#map_canvas').css({height:adjustedHeight});
            //$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
            setTimeout(function() {

                var latlng = new google.maps.LatLng(lat, lng);
                var myOptions = {
                        zoom: 12,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                //var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
                //{preserveViewport: true});

                //crosshairLayer.setMap(map);

                google.maps.event.trigger(map, 'resize');
                map.setZoom( map.getZoom() );
            }, 500);
        }
</script>
</div><!-- end wrapper -->
</body>
</html>

Answer 1

解决。我在data-role="page" div中有两个ID，当我尝试引用第二个时，它正在读取第一个ID作为ID。现在，pageshow事件修复工作正如third link above中所示。

Google地图在JQuery Mobile中显示不正确

1 个答案: