Javascript 无法使用google地图获得多页jquery mobile_Javascript_Jquery_Jquery Mobile_Google Maps Api 3_Jquery Ui Map

Javascript 无法使用google地图获得多页jquery mobile

javascript jquery jquery-mobile google-maps-api-3

Javascript 无法使用google地图获得多页jquery mobile,javascript,jquery,jquery-mobile,google-maps-api-3,jquery-ui-map,Javascript,Jquery,Jquery Mobile,Google Maps Api 3,Jquery Ui Map,我让jquerymobile与谷歌地图一起工作，这样我就可以显示一个独立的页面，其中的地图占据了整个屏幕。然而，我不知道如何制作一个简单的2页示例，其中我有一个按钮可以将我带到地图我很困惑为什么在所有示例的body标记中都有javascript。我一直在尝试下面的例子，但是很难弄清楚在所有源HTML中基本映射需要什么。我不熟悉使用jQuery和javascript 下面是作为独立页面使用的HTML代码 <!doctype html> <html lang="en">

我让jquerymobile与谷歌地图一起工作，这样我就可以显示一个独立的页面，其中的地图占据了整个屏幕。然而，我不知道如何制作一个简单的2页示例，其中我有一个按钮可以将我带到地图

我很困惑为什么在所有示例的body标记中都有javascript。我一直在尝试下面的例子，但是很难弄清楚在所有源HTML中基本映射需要什么。我不熟悉使用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>

总之，我的问题是：

我很困惑我需要把我的Java脚本放在哪里。在第一个独立页面示例中，如果我将javascript移动到head标记，则没有任何效果。我需要在头部和身体中加入javascript吗？如果是的话，去哪里

在本例中，我如何实现

pagecreate

，通常应在何时使用它

我还需要做些什么才能让这个基本示例正常工作

有没有指向简单的移动jQuery代码的指针，而没有太多额外的东西

如中所述，在jQuery Mobile中，AJAX用于在导航时将每个页面的内容加载到DOM中，并且DOM就绪处理程序

$（document）.ready（）

仅对第一个页面执行

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

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

第一个示例是多页示例

第二个示例包括两个页面，通过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>

在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 mobile与谷歌地图地理方向示例
地图
返回

我希望这有帮助