最终解决方案：

Question

我正在使用JQuery mobile和Google Map API。除非我刷新页面并且我不明白原因，否则地图无法正确显示。

这是我的map.html文件：

<div data-role="page" id="map-page">  
    <div data-role="content" id="canvas-map" style="background-color:red"></div>
    <script src="js/map.js"></script>
    <script type="text/javascript">
        var $canvasMap = $('#canvas-map');
        $('#canvas-map').on('pagebeforeshow', initMap());
    </script>
</div>

和我的map.js文件：

function initMap() {
    "use strict";
    google.maps.visualRefresh = true;

    var marker, map, 
        myLocation = {lat:50, lon:-80},
        mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
            mapTypeId: google.maps.MapTypeId.PLAN,
            disableDefaultUI: true
        };

    $('#canvas-map').css("height", "200px").css("padding", "0px");
    map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);

    /** MyPosition **/
    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
    });
}

如果我从另一个页面导航到上一页，我会得到以下结果： broken google maps

然后当我刷新时，我得到了预期的结果： refreshed google maps working fine

这显然不是画布的问题，因为它显示（红色）。另外，如果我在地图上导航，我可以看到标记显示在正确的位置。这些屏幕截图是使用谷歌浏览器制作的，我尝试使用Firefox，画布在这里完全是红色的，根本没有地图。

PS：这是我原始代码的简单版本，但行为是一样的。

编辑：

有关详细信息，请参阅Gajotres的回答，但基本上，在访问map.html页面的链接中，添加target="_blank"解决了问题。请注意，target="_self"似乎也很有用，因为它应该是默认值。有关目标 here的详细信息。

Answer 1

有一个技巧可以使用jQuery Mobile轻松实现 google maps v3 框架。

让我们来谈谈这里的问题。您的内容div有高度和宽度问题，主要是因为在 pageshow 事件期间只能正确计算时间页面尺寸。但即便如此，内容div也不会覆盖整页。

您的问题可以通过一点点CSS来解决：

#content {
    padding: 0 !important;
    position : absolute !important; 
    top : 40px !important;  
    right : 0 !important; 
    left : 0 !important;     
    height: 200px !important;
}

基本上，您正在强制您的内容覆盖可用空间。

工作示例：http://jsfiddle.net/RFNPt/2/

最终解决方案：

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
        <title>MyTitle</title>
    </head>
    <body> 
        <div data-role="page" class="page"> 
            <div data-role="content" id="index-content">
                <div id="menu">
                    <a href="map.html" data-role="button" target="_blank">Map</a>
                </div> 
            </div> 
        </div> 
    </body> 
</html>

map.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
        <title>MyTitle</title>
    </head>
    <body>
        <div data-role="page" id="map-page">            
            <div data-role="content" id="content">
                <div id="canvas-map" style="height:100%"/>
            </div>      
            <style>
                #content {
                    padding: 0 !important; 
                    position : absolute !important; 
                    top : 0 !important; 
                    right : 0 !important; 
                    bottom : 40px !important;  
                    left : 0 !important;     
                }       
            </style>            
            <script type="text/javascript">         
                $(document).on('pageshow', '#map-page', function(e, data) {
                    var marker, map, 
                        myLocation = { 
                            lat: 50, 
                            lon: -80 
                        }, 
                        mapOptions = { 
                            zoom: 5, 
                            mapTypeId: google.maps.MapTypeId.PLAN, 
                            center: new google.maps.LatLng(myLocation.lat, myLocation.lon) 
                        }; 
                    $('#canvas-map').css("height", "200px").css("padding", "0px"); 
                    map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions); 
                    marker = new google.maps.Marker({ 
                        map: map, 
                        position: new google.maps.LatLng(myLocation.lat, myLocation.lon), 
                    });     
                }); 
            </script>           
        </div>
    </body>
</html>

如果您看一下 ARTICLE ，您会发现有关此主题的更多信息以及示例。

Answer 2

尝试添加以下代码......

$('#canvas-map').on('pageshow', function(){
    google.maps.event.trigger(canvas-map, "resize");
});

这将触发调整大小事件并重新加载页面上的地图。

Answer 3

为了完整性：绘制地图的操作应该在页面加载后执行，即页面具有宽度和高度的实际值，您可以按如下方式初始化：

var map; //declared as global so you can access the map object and add markers dynamically $("#canvas-map").on( "pageshow", function() { var mapProp = { center:new google.maps.LatLng(53.6721226, -10.547924), zoom:13, mapTypeId:google.maps.MapTypeId.ROADMAP }; map=new google.maps.Map(document.getElementById("map-canvas"),mapProp); });

无需刷新

除非刷新，否则谷歌地图无法正确显示

编辑：

3 个答案:

最终解决方案：

的index.html

map.html