jQuery Mobile에서 Google지도를 표시 할 수 없습니까?

실행하면 색인 페이지 하단의 링크를 클릭하여지도 페이지로 이동하면지도가 잠시 사라져서 화면의 1/4이 채워진 다음 사라집니다. 내가 도대체 뭘 잘못하고있는 겁니까? 지도 페이지 여기jQuery Mobile에서 Google지도를 표시 할 수 없습니까?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>   
     <script type="text/javascript"> 
      function initialize(){ 
       if(!window.navigator.onLine){ 
        alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app."); 
        var element = document.getElementById("mainPage"); 
        element.parentNode.removeChild(element); 
        document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>"; 
       } 
      } 
     </script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
     <script type="text/javascript"> 
      // When map page opens get location and display map 
      $('.page-map').live("pagecreate", function() { 
       initializeMap(42,-73); 
      }); 
      function initializeMap(lat,lng) { 
       var latlng = new google.maps.LatLng(lat, lng); 
       var myOptions = { 
        zoom: 8, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
      } 
     </script> 
    </head> 
    <body id="mainBody" onload="initialize()"> 
     <div id="mainPage" data-role="page" data-theme="e"> 
      <div data-role="header"> 
       <!-- <img src="headerlogo.png" />--> 
       <br /> 
       <p style="text-align:center">To begin searching for samples, select one of the following search methods.</p> 
      </div> 
      <div data-role="content" style="height: 100%;"> 
       <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a> 
       <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a> 
       <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a> 
       <a href="dragMap.html">Testing</a> 
      </div> 
     </div> 
    </body> 
</html>

그리고있다 :

이

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    </head> 
    <body> 
     <div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;"> 
      <div data-role="header"><h1>Map Page</h1></div> 
      <div data-role="content" style="width:100%; height:100%; padding:0;"> 
       <div id="map_canvas" style="width:100%; height:100%;"></div> 
      </div> 
     </div> 
    </body> 
</html>

출처

2012-05-24 New2This

다음 코드는 작동 : jsfiddle

여기

지도 페이지를 생성하는 인덱스 페이지에 대한 코드입니다 내가 코드를 간단하게 만들었고 (다중 페이지가 아닌 단일 페이지 템플릿을 사용하여 jsfiddle를보다 쉽게 만들었습니다) 머리 안의 모든 스크립트를 옮겼습니다.

또한 phonegap에주의해야합니다. body onload 이벤트가 아니라 onDeviceReady 이벤트를 처리해야합니다. 그래도 온라인 상태인지 확인하려면 different method there이 필요합니다.

출처

2012-05-24 21:14:35 chrisben

지도보기 : http://jsfiddle.net/5hR9x/3/ 이제지도가 나타나지만 모든 작업이 완료됩니다. 절대 위치 지정은 첫 번째 상위 요소에 상대적이어야하며 내용 div가되지만 대신 본체에 상대적으로 배치됩니다. 왜 그런지 아십니까? 또한지도가 25 % 크기로만 표시되는 방법에 유의하고 자체 확장을 허용하지 않습니다. 이것은 나를 상당히 혼란스럽게합니다. – New2This

jQuery Mobile에서 Google지도를 표시 할 수 없습니까?

답변

관련 문제