Question

我正在为我的跨平台移动应用制作一个页面，它将显示几个标记。我的地图页面在直接加载时工作正常，但当我从我的移动应用程序中的另一个页面访问它时（在Chrome和Firefox桌面上测试时），地图页面将不显示，只显示页眉和页脚。我在网上搜索过这个问题，有人说可能是当页面直接加载页面上的所有东西都加载但是当通过另一个页面上的链接访问页面时，它只加载页面的一部分，这就是为什么它没有显示。我已经尝试将我的Javascript地图代码移动到正文中，就在打开正文标记之后，就在关闭正文标记之前，以及将我的代码放在一个单独的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问题而且确实如此。添加数据-ajax =＆＃34; false＆＃34;链接到我的地图页面的任何锚标签解决了这个问题。像这样：

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

谷歌地图＆amp; jQuery Mobile页面仅在直接加载页面时显示

2 个答案: