Question

我在query-ui-maps上测试了这个演示： http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map

除了我的index.html文件的head部分之外，一切都是一样的：

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

该演示适用于我桌面上的safari，但无论我是在ios5模拟器还是ios5手机上进行测试，都会加载屏幕。没有错误记录到控制台。我在Xcode中测试并使用手机间隙。 Blank screen 请帮忙。

这是代码：

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>

Answer 1

经过多次搜索，这被证明是最好的答案： http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position

演示jquery ui地图在ios5中是空白的

1 个答案: