无法使用Google地图使用多页jQuery Mobile

Question

我让jQuery mobile与google maps一起工作，以便我可以显示一个单独的页面，其中的map占据了整个屏幕。 但是，我无法弄清楚如何制作一个简单的2页示例，其中有一个带我进入地图的按钮。

我对为什么所有示例的body标签中都有javascript感到非常困惑。 我一直在尝试按照此处的示例http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html进行操作，但是很难弄清是什么仅对于所有源HTML中的basic_map是必需的。 我是使用jQuery和javascript的新手。

这是可以用作独立页面的HTML代码。

<!doctype html>
<html lang="en">
   <head>
        <title>Simple Map</title>
        <!--link type="text/css" rel="stylesheet" href="css/style.css" -->
    </head>
    <body>

        <div id="basic_map" data-role="page" class="page-map">
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript"          
        src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
        <!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->     
        <script type="text/javascript">
                $(function(){
                    initializeMap(37.6, -122.1);
                });

                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: 9,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                        google.maps.event.trigger(map, 'resize');
                        map.setZoom( map.getZoom() );
                    }, 500);
                }
        </script>
    </body>
</html>

我尝试实现以下两个屏幕示例，在该示例中，我在第一页上输入了纬度和经度，然后转到下一页上以该点为中心的地图。 但是，我的地图显示在文本框下（而不是按需要显示在新页面上），并且出现错误：

未捕获的TypeError：无法调用未定义的方法“ changePage”

根据其他帖子，该错误与我有关，需要调用pagecreate函数而不是$(document).ready() 。 我之所以没有调用这两个函数，是因为我不知道它们是否必要，因为我能够制作其他简单的多页面移动Web应用程序，而不必等待其他页面准备就绪或创建。

我的产生错误的多屏幕代码是

<!doctype html>
<html lang="en">
<head>
    <title>Simple Map</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
    <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
    <!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
    <script type="text/javascript">

    var lat;
    var lng;
    function plotPoint(){
        lat = document.getElementById("lat").value;
        lng = document.getElementById("lng").value;

        initializeMap(lat,lng);
        $.mobile.changePage("#basic_map", "pop");
    }

    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: 9,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            google.maps.event.trigger(map, 'resize');
            map.setZoom( map.getZoom() );
            }, 500);
        }
        </script>
<!-- Main Page-->
<!-- Start of second page: #viewMap -->
<div data-role="page" id="main" data-theme="c">
    <div data-role="header">
        <h1>Main Page</h1>
    </div><!-- /header -->
    <div data-role="content" data-theme="c">
        <label for="lat">Latitude:</label>
        <input type="text" name="lat" id="lat" value="" />
        <label for="lng">Longitude:</label>
        <input type="text" name="lng" id="lng" value="" />
        <a href="#" data-role="button" data-theme="b" onclick="plotPoint()">Plot this point</a>
    </div><!-- /content -->
</div><!-- /viewMap page -->

<div id="basic_map" data-role="page">
    <div data-role="content">
        <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
            <div id="map_canvas" style="height:350px;"></div>
        </div>
    </div>
</div>


</body>
</html>

总而言之，我的问题是：

我对需要在哪里放置JavaScript感到非常困惑。 在第一个独立的页面示例中，如果将javascript移到head标签，则没有任何效果。 我需要在头部和身体放置JavaScript吗？ 如果是这样，那去哪儿了？
在此示例中，如何实现pagecreate以及通常应在何时使用它？
为了使此基本示例正常工作，我还需要做什么？
是否有指向简单的移动jQuery代码的指针，而其中没有大量额外的内容？

Answer 1

如jQuery Mobile文档所述，在jQuery Mobile中，AJAX用于在导航时将每个页面的内容加载到DOM中，并且DOM ready处理程序$(document).ready()仅在第一页执行。

jQuery Mobile仅加载DOM中第一个data-role =“ page”元素内的代码。 因此，如果通过AJAX执行导航，则不会加载第二页上的脚本。

您可能会在下面的jQuery Mobile中找到两个Google Maps示例示例。

第一个示例是多页示例。

第二个示例包括两个页面，通过Ajax进行导航，并将地图加载到第二个页面内。

范例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Map Example Multiple Pages</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jQuery mobile with Google maps</title>
        <meta content="en" http-equiv="content-language">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script>
            function initialize() {
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
                myOptions = {
                    zoom:10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: mapCenter
                },
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            $(document).on("pageinit", "#map-page", function() {
                initialize();
            });
        </script>
    </head>

    <body>
        <div data-role="page" id="home-page">
            <!-- /header -->
            <div data-role="header">
                <h1>Maps</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
                <a href="#map-page" data-role="button" data-transition="fade">Click to see the Map</a>
            </div>
        </div>

        <!-- /page -->
        <div data-role="page" id="map-page">
            <!-- /header -->
            <div data-role="header">
                <h1>Map</h1>
                <a href="#home-page" data-icon="home">Home</a>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>
            </div>
        </div>
    </body>
</html>

范例2：

说明：

建立资料夹
在文件夹内创建一个名为maps.js的文件
在文件夹内创建一个名称为map-intro.html的文件
在文件夹内创建一个名称为map.html的文件
用相应的代码填充每个创建的文件，可以在下面找到

在maps.js中添加以下代码：

function initialize() {
    var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
    myOptions = {
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: mapCenter
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$( document ).on( 'pageshow', '#map-page',function(event){
  initialize();
});

$( document ).on( 'click', '#map-anchor',function(event){
  event.preventDefault();
  $.mobile.changePage( "map.html", { transition: "flip" } );
});

在map-intro.html中添加以下代码：

<!doctype html>
<html lang="en">
   <head>
        <title>Map Intro Page</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script src="./maps.js"></script>
    </head>
    <body>
        <div id="map-intro-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Map Example</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="my-list">
                    <li><a href="#" id="map-anchor">Go to Map</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

在map.html中添加以下代码：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>jQuery mobile with Google maps geo directions example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <!-- /page -->
        <div data-role="page" id="map-page">
            <!-- /header -->
            <div data-role="header">
                <h1>Map</h1>
                <a data-rel="back">Back</a>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>
            </div>
        </div>
    </body>
</html>

我希望这有帮助。

无法使用Google地图使用多页jQuery Mobile

问题描述

1 个解决方案

解决方案1
4 已采纳 2012-08-21 18:13:31

无法使用Google地图使用多页jQuery Mobile

问题描述

1 个解决方案

解决方案1 4 已采纳 2012-08-21 18:13:31

解决方案1
4 已采纳 2012-08-21 18:13:31