2013-10-10 29 views
0

我正在使用谷歌地圖使用手機差距。它正在使用jquerymobile框架創建的移動網站上工作,但是當我使用phonegap在Eclipse中將項目複製到模擬器上進行測試時,它不起作用。它在實際設備上工作,但不能在仿真器上工作。谷歌API使用phonegap不顯示地圖和赤裸裸和赤腳

代碼文件:

config.xml中

<access origin="*" subdomains="true"/> 
<access origin="google.com"; /> 
<access origin="maps.google.com"/> 
<access origin="google.com"; /> 
<access origin="maps.google.com*"/> 

的index.html

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <title>Test</title> 

    <meta name="viewport" content="width=device-width,initial-scale=1"/> 

<!-- CSS Style Sheetes --> 

    <link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
    <link rel="icon" href="images/IconTaxi.png" type="image/x-icon"> 

<!-- JavaScript --> 

    <script src="js/jquery.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script> 
    <script src="js/main.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">  </script> 
     <script src="js/cordova.js" type="text/javascript"></script> 


</head> 

<body> 
<div data-role="page" id="page"> 
    <div class="headerStyle"> 
     <h2 class="headingHeader"><img class="headerImage" src="images/flag.png" alt"United Arab Emirates"/></h2> 
    </div> 
    <div class="logo"></div> 
    <h1 class="headingImage">Welcome </h1> 
    <div data-role="content"> 
     <ul data-role="listview" class="mainmenu"> 
      <li><a href="companyList.html">Get Companies</a></li> 
      <li><a href="#AboutUs">About Us</a></li> 
     </ul>  
    </div> 


</body> 
</html> 

在這個頁面上我顯示的地圖上,當用戶userRequest.html開關:

 <!DOCTYPE HTML> 
       <html> 
       <head> 
       </head> 

       <body> 

       <div id="userRequest" data-role="page" > 

      <div data-role="header" data-position="fixed"> 
       <a href="companyList.html" data-role="button" class="ui-btn-left" data-icon="back" data-inline="true" data-transition="slide" data-theme="e">Back</a> 
      <h1 id="getComapnyHeader"></h1> 
     </div> 

     <div data-role="content" id="requestForm" style="background:none">   
       <div class="content-primary"> 
        <form id="userOrder"> 
         <div style="padding:10px 0px;"> 
          <label for="userName" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="userName" required ="required" id="userName" value="" placeholder="Your Name" required data-theme="e" /> 

          <label for="userPhone" class="ui-hidden-accessible">PhoneNumber:</label> 
          <input type="tel" name="userPhone" required ="required" id="userPhone" value="" placeholder="PhoneNumber" required data-theme="e" /> 
         </div> 
         <div id="map"></div> 
        </form> 


     </div> 

    </div> 

    </body> 
    </html> 

main.js

$(document).ready(function() { 
    // setup global error handler 
    window.onerror = function (message, url, lineNumber) { 
     console.log([lineNumber, url, message].join(" ")); 
     return false; 
    }; 

    console.log("document.ready"); 
    console.log(window.location.hash); 

    // start the app 
    app.init(); 
}); 

var app = app || { _timeStart: null }; 

app.init = function() { 

    app.Lati = 0; 
    app.longi = 0; 
    $('#userRequest').live('pageshow', function(e) { app.getGeoLocation(e); }); 
}); 

}; 

app.getGeoLocation = function(e) { 

    navigator.geolocation.getCurrentPosition(app.onGeoSuccess, app.onGeoError); 

}; 

app.onGeoError = function(error) { 
    if(error == 1) 
    { 
     alert("Turn On Geo Location"); 
    } 
}; 

app.onGeoSuccess = function(position) 
{ 
    var lat = position.coords.latitude; 
    var lon = position.coords.longitude; 
    var currentPosition = new google.maps.LatLng(lat, lon); 

    var mapOptions = { 
      zoom: 12, 
      center: currentPosition, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: true 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     var marker = new google.maps.Marker({ 
      position: currentPosition, 
      map: map, 
     }); 

     app.Lati = lat; 
     app.longi = lon; 
     console.log(app.Lati); 

}; 
+0

有在logcat的任何錯誤? –

+0

不,沒有錯誤相關。甚至相同的代碼工作正常瀏覽器甚至越來越經緯度和顯示地圖,但是當我使用此代碼fororid使用phonegap它不工作 這裏在confif.xml文件我添加 <訪問起源=「」子域=「 true「/> Wajihurrehman

回答

1

您可能沒有正確列入白名單。

從快速瀏覽,它看起來像你需要進行白名單:

  • code.jquery.com
  • 谷歌地圖相關項目。

老實說,你應該真的下載jQuery,並在本地擁有它,而不是試圖從CDN檢索它。

谷歌地圖項目可能有點棘手,因爲它有很多的依賴關係。可能的工作清單是:

  • * .google.com
  • * .googleapis.com
  • * .gstatic.com
+0

您能否指定我的代碼需要更改與Google地圖相關的更改?正如你提到的鏈接* .google.com等? – Wajihurrehman

+0

你把代碼放在config.xml中。轉到PhoneGap文檔並查看域名白名單 –

+0

http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html在此phonegap文檔中提到* allaow for所有域 我在config.xml中做到了這一點,但仍然沒有發生 – Wajihurrehman