Map view is not loading with PhoneGap

前端未结

关注

 1  586

I am developing an iPhone application using PhoneGap and jQueryMobile, in my application I have two html pages, first is index.html page and second is mapView.html, now, my

相关标签:

1条回答

攒了一身酷

2021-01-14 13:05

The $.mobile.changePage uses the jQuery Mobile AJAX functionality. jQuery Mobile loads only the code which is inside the first data-role="page" element in the DOM.

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.

Below you can find a working example which includes two pages, the navigation is performed through Ajax and the map is loaded inside the second page:

Also note that you can perform a transition using rel="external" or data-ajax="false". The usage of these attributes will cause a full page refresh without animated transition.

Working Example:

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.

0 讨论(0)