Google지도가 Android 태블릿에 완전히 표시되지 않음

-1

Google지도를 내 Android 태블릿에 추가하여 터미널이 어디에 있는지 감지하려고합니다. 그러나지도가 완전히 표시되지 않습니다. 작은 부분 만 표시되었습니다. 화면을 회전시킨 후 완벽하게 표시 할 수 있습니다. 내가 한 모든 http://www.digitalnoiz.com/mobile-development/geolocation-jquery-mobile-maps/ 에 따라이 내 html 코드입니다 :Google지도가 Android 태블릿에 완전히 표시되지 않음

<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); 
}

아무도 내게 약간의 조언을 줄 수 있습니까?

출처

2012-09-11 HuaY

내가 (바탕 화면에 특히 크롬)도이 있었고 그것이 렌더링을 마치지도 크기를 조정하여 그것을 해결을 '유휴'상태) :

google.maps.event.addListenerOnce(map, 'idle', function() { 
    google.maps.event.trigger(map, 'resize'); 
});

출처

2012-10-22 11:09:06

지도의 DIV에게 크기 (폭과 높이 모두) 보내기 (에

<div id='map_canvas' style="width:400px; height:500px"></div>

출처

2012-09-11 10:29:45 Marcelo

내 div 크기를 지정했습니다. #map_canvas { width : 100 %; 신장 : 600px; 여백 - 하단 : 10px; }하지만 여전히 작동합니다. – HuaY

비율이 아닙니다! 너비 : 100 % 무엇? – Marcelo

화면의 100 %. 지도가 렌더링 되더라도 화면에 맞추기를 원합니다. – HuaY

Google지도가 Android 태블릿에 완전히 표시되지 않음

답변

관련 문제