Demo JQuery Ui Carte est vide dans iOS5

StackOverflow https://stackoverflow.com//questions/11682597

Question

Je testais cette démo sur Query-UI-Maps: http:// jQuery-u-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map

Tout est identique à l'exception de la section de tête de mon fichier index.html: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,  user-scalable=no">
        <link rel="stylesheet" href="jquery-mobile/jquery.mobile.css" />
        <link href="css/jquery.mobile-swatch.css" rel="stylesheet" type="text/css"/>
        <link href="css/custom-icons.css" rel="stylesheet" type="text/css"/>
        <link href="css/mapapp.css" rel="stylesheet" type="text/css"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"  type="text/javascript"></script>
        <script src="js/jquery.js"></script>
        <script src="jquery-mobile/jquery.mobile.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.map.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/cordova-iphone.js"></script>
        <script type="text/javascript" src="ui/jquery.ui.map.services.js"></script>
        <script type="text/javascript" src="js/jquery-ui-autocomplete-1-8-15.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>

La démonstration fonctionne dans Safari sur mon bureau, mais charge l'écran ci-joint si je teste dans un simulateur IOS5 ou un téléphone iOS5.Aucune erreur n'est enregistrée sur la console.Je teste en Xcode et utilise l'écart téléphonique. écran vide S'il vous plaît aider.

Ceci est le code: 

var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
        $('#directions_map').live('pageinit', function() {
            demo.add('directions_map', function() {
                $('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
                    var self = this;
                    self.set('getCurrentPosition', function() {
                        self.refresh();
                        self.getCurrentPosition( function(position, status) {
                            if ( status === 'OK' ) {
                                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                                self.get('map').panTo(latlng);
                                self.search({ 'location': latlng }, function(results, status) {
                                    if ( status === 'OK' ) {
                                        $('#from').val(results[0].formatted_address);
                                    }
                                });
                            } else {
                                alert('Unable to get current position');
                            }
                        });
                    });
                    $('#submit').click(function() {
                        self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
                            ( status === 'OK' ) ? $('#results').show() : $('#results').hide();
                        });
                        return false;
                    });
                }});
}).load('directions_map');

        });


        $('#directions_map').live('pageshow', function() {
            demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
        });

    </script>

</head>
<body>
    <div id="directions_map" data-role="page">
        <div data-role="header">
            <h1>jQuery mobile with Google maps v3</h1>
            <!--<a data-rel="back">Back</a>-->
        </div>
        <div data-role="content">
            <div class="ui-bar-f ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas_1" style="height:300px; width:100%;"></div>
                <p>
                    <label for="from">From</label>
                    <input id="from" class="ui-bar-f" type="text" value="G&ouml;teborg, Sweden" />
                </p>
                <p>
                    <label for="to">To</label>
                    <input id="to" class="ui-bar-f" type="text" value="Stockholm, Sweden" />
                </p>
                <a id="submit" href="#" data-role="button"  data-icon="search">Get directions</a>
            </div>
            <div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
                <div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Results</div>
                <div id="directions"></div>
                <div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-bottom ui-btn-up-undefined"></div>
            </div>
        </div>
    </div>


</body>

Était-ce utile?

La solution

Après de nombreuses recherches, cela s'est avéré être la meilleure réponse: http://code.google.com/p/jquery-ui-map / wiki / exemples # exemple_get_user_position

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top