javascript - 无法让多页jquery mobile与谷歌地图一起使用-6ren

javascript - 无法让多页jquery mobile与谷歌地图一起使用

转载作者：行者123 更新时间：2023-11-28 16:14:06

我有 jQuery Mobile 与 google map 配合使用，这样我就可以显示一个独立的页面，其中包含占据全屏的 map 。但是，我不知道如何制作一个简单的两页示例，其中有一个按钮可以将我带到 map 。

我很困惑为什么所有示例的正文标记中都有 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 个屏幕示例，其中我在第一页上输入纬度和经度，然后转到下一页上以该点为中心的 map 。但是，我的 map 显示在文本框下方(而不是所需的新页面上)，并且出现错误:

Uncaught TypeError: Cannot call method 'changePage' of undefined

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

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

<!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 代码的指针，其中没有大量额外的内容？

最佳答案

As stated in the jQuery Mobile docs, in jQuery Mobile, AJAX is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler $(document).ready() only executes for the first page.

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

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

第一个示例是多页示例。

第二个示例包含两个页面，通过 Ajax 执行导航，并在第二个页面内加载 map 。

示例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>