Question

我让jQuery移动设备使用谷歌地图，这样我就可以显示一个独立的页面，其中包含占据全屏的地图。但是，我无法弄清楚如何制作一个简单的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>

我已经尝试实现以下2个屏幕示例，我在第一页上输入纬度和经度，然后我转到下一页上该点居中的地图。但是，我的地图显示在文本框下（不是根据需要在新页面上），我收到错误：

未捕获的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>

总之，我的问题是：

我很困惑我需要放置我的javascripts。在第一个独立页面示例中，如果我将javascript移动到head标签，则无效。我需要将javascript放在头部和身体吗？如果是这样，那会是什么？
如何在此示例中实现pagecreate以及何时应该使用它？
要使这个基本示例有效，还需要做些什么？
是否有指向简单的移动jQuery代码的指针，而没有大量的额外内容？

Answer 1

如jQuery Mobile docs中所述，在jQuery Mobile中，AJAX用于在导航时将每个页面的内容加载到DOM中，而DOM就绪处理程序$(document).ready()仅针对第一页执行

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

您可以在jQuery Mobile中找到以下两个Google地图示例。

第一个例子是一个多页例子。

第二个例子包括两个页面，导航是通过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中添加以下代码：

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>

我希望这会有所帮助。

使用谷歌地图无法获得多页jquery移动设备

1 个答案: