-1

ターミナルがどこにあるかを検出するためにAndroidタブレットにグーグルマップを追加しようとしていますが、マップが完全に表示されていません。小さな部分だけが表示されました。画面を回転させた後、完全に表示できます。私はhttp://www.digitalnoiz.com/mobile-development/geolocation-jquery-mobile-maps/に従ってこれをすべて行いました。 これは私のhtmlコードです。

 <head>
        <link href='stylesheets/jquery.mobile-1.1.0.css' rel='stylesheet' />
        <link href='stylesheets/my.css' rel='stylesheet' />
        <script charset='utf-8' src='javascripts/jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
        <script charset='utf-8' src='javascripts/jquery.ui.map.min.js' type='text/javascript'></script>
        <script charset='utf-8' src='http://maps.google.com/maps/api/js?sensor=true' type='text/javascript'></script>
        <script charset='utf-8' src='javascripts/application.js' type='text/javascript'></script>
        <script charset='utf-8' src='javascripts/jquery/jquery.mobile-1.1.1.js' type='text/javascript'></script>
    <script type="text/javascript" charset="utf-8" src="javascripts/phonegap/cordova-2.0.0.js"><\/script>
    </head>
    <body>
     <!-- Diagnostic -->
        <div data-role='page' id='diagnostic_page'>
          <div data-position='inline' data-role='header' data-theme='a'>
            <h2>
              Diagnostic
            </h2>
            <a data-icon='arrow-l' href='#index_page'>
              Back
            </a>
            <a data-role='button' href='#diagnostic_page' id='PageRefresh'>
              Refresh
            </a>
          </div>
          <div data-role='content' style='padding: 15px'>
            <ul data-divider-theme='a' data-inset='true' data-role='listview'>
             <!--there are some other list variables-->
              <li data-theme='c'>
                Show current location:
                <a class='classspan' href='#location_page'>
                  Click on me
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- show current location -->
        <div data-role='page' data-theme='c' id='location_page'>
          <div data-position='fixed' data-role='header' data-theme='a'>
            <a data-icon='arrow-l' href='#diagnostic_page'>
              Back
            </a>
            <h2>
              DigitalNoiz
            </h2>
            <div data-role='header'></div>
            Geolocation
            <div id='map_canvas'></div>
            <div id='geolocation'></div>
          </div>
        </div>
     </body>

これは私のJqueryコードであり、すべての関数コードはapplication.jsで編集されています。

function onLoad() {
    console.log('Init reached');
    $.mobile.allowCrossDomainPages = true;
    $.mobile.showPageLoadingMsg();
    $.support.cors = true;
    document.addEventListener('deviceready', onDeviceReady, false);
}
function onDeviceReady() {
    console.log('Starting up...');
//  navigator.app.overrideBackbutton(true);
    document.addEventListener("backbutton", onBackKeyDown, false);
    console.log('Initializing db'); 
    refreshpage();
        getPosition();

}
function getPosition(){
    var geoOptions = { enableHighAccuracy: true, timeout: 10000 };
    navigator.geolocation.getCurrentPosition(function(position){ // geoSuccess
        // we have the position
        var geolocation = $('#geolocation');
        geolocation.html('<table></table>');

        var table = geolocation.find('table');
        if(position.coords.latitude)
            table.append('<tr><th>Latitude</th><td>' + position.coords.latitude + '</td></tr>');
        if(position.coords.longitude)
            table.append('<tr><th>Longitude</th><td>' + position.coords.longitude + '</td></tr>');
        if(position.coords.altitude)
            table.append('<tr><th>Altitude</th><td>' + position.coords.altitude + '</td></tr>');
        if(position.coords.accuracy)
            table.append('<tr><th>Accuracy</th><td>' + position.coords.accuracy + '</td></tr>');
        if(position.coords.altitudeAccuracy)
            table.append('<tr><th>Altitude Accuracy</th><td>' + position.coords.altitudeAccuracy + '</td></tr>');
        if(position.coords.heading)
            table.append('<tr><th>Heading</th><td>' + position.coords.heading + '</td></tr>');
        if(position.coords.speed)
            table.append('<tr><th>Speed</th><td>' + position.coords.speed + '</td></tr>');
        if(position.coords.timestamp)
            table.append('<tr><th>Timestamp</th><td>' + new Date(position.timestamp) + '</td></tr>');

         //show position on map 
        var map_canvas = $('#map_canvas');
        map_canvas.gmap(
            {'center' : position.coords.latitude + ',' + position.coords.longitude,
            'zoom' : 12,
            'disableDefaultUI':true,
            'callback':function(){
                var self = this; 
                var marker = self.addMarker({ 'position' : this.get('map').getCenter() });
                marker.click(function(){
                    self.openInfoWindow({ 'content' : 'This is your current location' }, this);
                });
            }
        }); 
    }, function(error){ // geoError
        navigator.notification.alert('error: ' + error.message + '\n' + 'code: ' + error.code);
    }, geoOptions);
}

誰かが私にいくつかのアドバイスを与えることができますか？

4

2 に答える 2

0

マップdivにサイズ（幅と高さの両方）を指定します。

<div id='map_canvas' style="width:400px; height:500px"></div>
于 2012-09-11T10:29:45.347 に答える
0

私もこれを（特にデスクトップ上のChromeで）持っていて、レンダリングが終了したときに（「アイドル」状態で）マップのサイズを変更することで解決しました：

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});
于 2012-10-22T11:09:06.460 に答える