Google 地图 & jQuery 移动页面仅在页面直接加载时显示

Question

我正在为我的跨平台移动应用制作一个页面，该页面将显示多个标记。我的地图页面在直接加载时工作正常，但当我从我的移动应用程序中的另一个页面访问它时（在 Chrome 和 Firefox 的桌面上测试时）地图页面不会显示，只有 header 和页脚显示。我在网上搜索过这个问题，有人说可能是当页面直接加载时页面上的所有内容都会加载但是当通过另一个页面上的 link 访问页面时，它只会加载页面的一部分并且这就是它不显示的原因。我已经尝试将我的 Javascript 地图代码移动到 body，就在开始 body 标记之后，就在结束 body 标记之前，以及将我的代码是分离 JS 文件并从头部调用它，但没有任何效果。这是我的代码：

<!DOCTYPE html>
<head>
    <title>Map</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8">      
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css">      
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>      
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>        
    <script src="jquery.ui.map.full.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript"> 
        $(function() {
                var yourStartLatLng = new google.maps.LatLng(52.842659, -9.438168);
                $('#map_canvas').gmap({'center': yourStartLatLng});
                $('#map_canvas').gmap('option', 'zoom', 9); 
                var markers = ["53.120473", "-9.289028", "53.016460", "-9.413131", "53.014498", "-9.406779", "52.979603", "-9.431970", "52.935628", "-9.351032", "52.931089", "-9.349707", "52.928521", "-9.350962", "52.925986", "-9.352743", "52.922609", "-9.354438", "52.915720", "-9.368386", "52.881534", "-9.438011", "52.840389", "-9.432518", "52.845353", "-9.440865", "52.845729", "-9.448225", "52.849137", "-9.457538", "52.754507", "-9.494177", "52.737048", "-9.607952"];
                var spotNames = ["Fanore", " ", "Crab Island", " ", "Doolin", " ", "Aileens", " ", "Lahinch Beach", " ", "Lahinch Left", " ", "Cornish", " ", "Shit Creek", " ", "Cregg", " ", "BarTrá", " ", "Bumbaloids", " ", "Spanish Point Beach", " ", "Spanish Point Inside Reef", " ", "Spanish Point Middle Reef", " ", "Spanish Point Outside Reef", " ", "Doughmore Beach", " ", "Rileys", " "];                         
                var markerPos;
                for ( var i = 0; i < markers.length; i+=2 ) {   
                    createMarker(i);                                                
                }
                function createMarker(i) {
                    markerPos = new google.maps.LatLng( markers[i], markers[i+1]);  
                        $('#map_canvas').gmap('addMarker', { 'position':  markerPos, 'bounds': false }).click(function() {                          
                            $('#map_canvas').gmap('openInfoWindow', { 'content': spotNames[i] }, this);
                        }); 
                }                           
        });     
    </script>
</head>

<body>      
    <div data-role="page" data-theme="b" id="mapPage" style="width:100%; height:100%;">

        <div data-role="header" data-position="fixed">
            <h1>Map</h1>
        </div>

        <div id="map_canvas" style="width:100%; height:100%"></div>

        <div data-role="footer" data-position="fixed">
            <h1>Map</h1>
        </div>

    </div>
</body>
</html>

有谁知道这里可能是什么问题？

Answer 1

$(function()等价于$(document).ready(function() {});,which should not be used in jQuery Mobile.

将您的 JS 代码放入此事件处理程序中：

$("#mapPage").on("pagecreate", function()
{
    // your code
});

Answer 2

现在可以使用了，一位朋友建议这可能是一个 AJAX 问题，确实如此。将 data-ajax="false" 添加到链接到我的地图页面的任何锚标记解决了这个问题。像这样：

<a href="map.html" data-ajax="false">Map</a>

Google 地图 & jQuery 移动页面仅在页面直接加载时显示

Google Map & jQuery Mobile page only displaying when page is loaded directly

html

javascript

css

google-maps

jquery-mobile