无法使用Google地图获取多个页面jquery mobile [英] Can not get multiple page jquery mobile working with google maps

问题描述

我有jQuery移动工作与谷歌地图，以便我可以显示一个，独立页面与地图，占用全屏幕。然而，我不知道如何做一个简单的2页的例子，我有一个按钮，带我到地图。

我很困惑为什么所有示例中的body标签中都有javascript。我一直在试图按照这里的例子 http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html ，但是很难弄清楚basic_map只需要什么在所有源HTML中。我是使用jQuery和javascript的新手。

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

 <！doctype html> 
< html lang =en> 
< head> 
< title>简易地图< /标题> 
 <！ -  link type =text / css =stylesheethref =css / style.css - > 
< / head> 
< body> 
 
< div id =basic_mapdata-role =pageclass =page-map> 
< div data-role =content> 
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：350px;>< / div> 
< / div> 
< / div> 
< / div> 
 
< script type =text / javascript
 src =http://maps.googleapis.com/maps/api/js?&sensor=true><<< ; /脚本> 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.8.0.min.js>< / script> 
< script type =text / javascriptsrc =./ jquery-ui-map-3.0-rc / ui / jquery.ui.map.js>< / script> 
<！ -  script type =text / javascriptsrc =./ jquery-ui-map-3.0-rc / demo / js / demo.js>< / script  - > 
< script type =text / javascript> 
 $（function（）{
 initializeMap（37.6，-122.1）; 
}）; 
 
函数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：Can not调用方法'changePage'未定义

根据其他帖子，错误与我需要调用 pagecreate 函数而不是 $（document）.ready（）。我没有调用其中的任何一种功能，因为我不知道是否有必要，因为我可以制作其他简单的多页移动网络应用程序，而无需等待其他网页的准备或创建。

产生错误的多屏幕代码是

 < ！doctype html> 
< html lang =en> 
< head> 
< title>简易地图< /标题> 
< link type =text / css =stylesheethref =css / style.css> 
< / head> 
< body> 
< script type =text / javascript
 src =http://maps.googleapis.com/maps/api/js?&sensor=true>< / script> 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.8.0.min.js>< / script> 
< script type =text / javascriptsrc =./ jquery-ui-map-3.0-rc / ui / jquery.ui.map.js>< / script> 
<！ -  script type =text / javascriptsrc =./ jquery-ui-map-3.0-rc / demo / js / demo.js>< / script  - > 
< script type =text / javascript> 
 
 var lat; 
 var lng; 
函数plotPoint（）{
 lat = document.getElementById（lat）。value; 
 lng = document.getElementById（lng）.value; 
 
 initializeMap（lat，lng）; 
 $ .mobile.changePage（＃basic_map，pop）; 
 
 
函数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> 
<！ - 主页 - > 
 <！ - 第二页开头：#viewMap  - > 
< div data-role =pageid =maindata-theme =c> 
< div data-role =header> 
< h1>主页< / h1> 
< / div><！ -  / header  - > 
< div data-role =contentdata-theme =c> 
< label for =lat>纬度：< / label> 
< input type =textname =latid =latvalue =/> 
< label for =lng>经度：< / label> 
< input type =textname =lngid =lngvalue =/> 
< a href =＃data-role =buttondata-theme =bonclick =plotPoint（）>绘制这一点< / a> 
< / div><！ -  / content  - > 
< / div><！ -  / viewMap page  - > 
 
< div id =basic_mapdata-role =page> 
< div data-role =content> 
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：350px;>< / div> 
< / div> 
< / div> 
< / div> 
 
 
< / body> 
< / html> 
  

总之，我的问题是：

1. 我非常困惑我需要放置我的javascript的位置。在第一个独立页面的例子中，如果我将javascript移动到head标签，没有任何工作。我需要把JavaScript放在头部和身体？如果是这样，哪里去了？




2. 我还需要做些什么来获得这个基本的例子？

有指针简单，移动jQuery代码没有大量额外的东西在他们的？ >




正如 jQuery中所述移动文档，在jQuery Mobile中，AJAX用于在浏览时将每个页面的内容加载到DOM中，并且DOM就绪处理程序 $（document）.ready（）只针对第一页执行。




jQuery Mobile只加载第一个data-role =页面元素。因此，如果通过AJAX执行导航，那么第二页上的脚本不会被加载。





您可以在下面的两个示例中看到jQuery Mobile中的Google Maps。 / p>



第一个示例是一个多页示例。第二个示例包含两个页面，导航是通过Ajax执行的



示例1：



 <！DOCTYPE html> 
< html> 
< head> 
< title>地图示例多个页面< / title> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/> 
< title>带谷歌地图的jQuery手机< / title> 
< meta content =enhttp-equiv =content-language> 
< link rel =stylesheethref =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 / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本> 
< script> 
函数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）; 
 
 $ b $（document）.on（pageinit，＃map-page，function（）{
 initialize（）; 
}）; 
< / script> 
< / head> 
 
< body> 
< div data-role =pageid =home-page> 
<！ -  / header  - > 
< div data-role =header> 
< h1>地图< / h1> 
< / div> 
<！ -  / content  - > 
< div data-role =content> 
< a href =＃map-pagedata-role =buttondata-transition =fade>点击查看地图< / a> 
< / div> 
< / div> 
 
 <！ -   -  / page  - > 
< div data-role =pageid =map-page> 
<！ -  / header  - > 
< div data-role =header> 
< h1>地图< / h1> 
< a href =＃home-pagedata-icon =home>主页< / a> 
< / div> 
<！ -  / content  - > 
< div data-role =contentclass =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：300px;>< / div> 
< / div> 
< / div> 
< / body> 
< / html> 
  

示例2：



说明：






• 创建文件夹


• 在文件夹内创建名为maps.js的文件


• 在文件夹中创建一个名为map-intro.html的文件
  
• 在文件夹中创建一个名为map.html的文件


• 使用相应的代码填充每个创建的文件






在地图中添加下面的代码。 js：



 函数初始化（）{
 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）; 
 
 $ b $（document）.on（'pageshow'，'＃map-page'，function（event）{
 initialize（）; 
}） ; 
 $ b $（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>地图介绍页< /标题> 
< link rel =stylesheethref =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 / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本> 
< script src =./ maps.js>< / script> 
< / head> 
< body> 
< div id =map-intro-pagedata-role =page> 
< div data-role =header> 
< h1>< a data-ajax =falsehref =/> Map Example< / a>< / h1> 
< / div> 
< div data-role =content> 
< ul data-role =listviewid =my-list> 
< li>< a href =＃id =map-anchor>前往地图< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / body> 
< / html> 
  

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

 <！DOCTYPE html> 
< html> 
< head> 
< title>带谷歌地图的jQuery手机地图方向示例< / title> 
< link rel =stylesheethref =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 =pageid =map-page> 
<！ -  / header  - > 
< div data-role =header> 
< h1>地图< / h1> 
< a data-rel =back>返回< / a> 
< / div> 
<！ -  / content  - > 
< div data-role =contentclass =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：300px;>< / div> 
< / div> 
< / div> 
< / body> 
< / html> 
  

我希望这有助于您。




I have jQuery mobile working with google maps so that I can display one, stand alone page with a map that takes up the full screen. However, I can't figure out how to make a simple 2 page example where I have a button that takes me to the map.

I'm very confused as to why there is javascript in the body tags on all of the examples. I've been trying to follow the examples here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html , but it is very hard to figure out what is necessary just for the basic_map within all of the source HTML. I'm new to using jQuery and javascript.

Here is the HTML code that works as a stand alone page.

<!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>

I've tried implementing the following 2 screen example where I enter in the latitude and longitude on the first page, then I go to a map centered at that point on the next page. However, my map displays under the text boxes (not on a new page as desired) and I get the error:

Uncaught TypeError: Cannot call method 'changePage' of undefined

According to other posts that error has to do with me needing to call the pagecreate function instead of $(document).ready(). I'm not calling either of those functions because I didn't know if they were necessary since I was able to make other simple, multi page mobile web apps without having to wait for other pages to be ready or created.

My multiple screen code that produces the error is

<!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>

In summary, my issues are:

1. I'm very confused about where I need to place my javascripts. In the first, stand alone page example, if I move the javascript to the head tag, nothing works. Do I need to put javascript in the head AND the body? If so, what goes where?

2. How do I implement pagecreate in this example and when should I use it in general?

3. What other things do I need to do to get this basic example working?

4. Are there pointers to simple, mobile jQuery code without a ton of extra stuff in them?

解决方案

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 loads just the code which is inside the first data-role="page" element in the DOM. Therefore in case the navigation is performed through AJAX then the scripts on your second page are not loaded.

You may find below two sample examples of Google Maps in jQuery Mobile.

The first example is a multipage example.

the second example includes two pages, the navigation is performed through Ajax and the map is loaded inside the second page.

Example 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>

Example 2:

Instructions:

• Create a folder
• Create a file with name maps.js inside the folder
• Create a file with name map-intro.html inside the folder
• Create a file with name map.html inside the folder
• Fill each one of the created files with the corresponding code which can be found below

Add the below code inside the 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" } );
});

Add the below code inside the 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>

Add the below code inside the 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>

I hope this helps.

这篇关于无法使用Google地图获取多个页面jquery mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！