2014-04-28 24 views
0

在Cordova/PhoneGap 3.4環境中使用地理位置插件時遇到一些問題。 我沒有加載onDeviceReady中的Geolocation API,因爲它依賴於加載Google地圖API,我很確定提交給App Store的任何應用程序在初始加載時都會被拒絕(任何人都可以自由地確認是否反駁) )。爲什麼PhoneGap Geolocation API會導致我的頁面加載得太慢?

我正在使用Jquery Mobile 1.4.2並將地理位置代碼放置到不通過ajax加載的單獨「定位器」頁面上。然後,我會調用按鈕上的地理位置來顯示用戶在Google地圖上的位置。

我在iPad上測試應用程序,除了地理位置總是在第一次檢測位置時出現故障(我最近發佈了這個問題),JavaScript似乎推遲了頁面加載時間將近3秒(即使在iOS模擬器上也是如此!)。

我知道JavaScript的過度使用可能會導致一些滯後的PG應用程序,但我不相信這是發生在這裏。我呼籲所有的JavaScript在線:

<script type="text/javascript" charset="utf-8"> 
    // onSuccess Geolocation 
    // 
    function onSuccess(position) { 
     var element = document.getElementById('geolocation'); 
     //OUTPUT COORDINATES INFORMATION INTO HTML 
    element.innerHTML = '<h2>Detailed Gelocation information</h2><table class="geoTable"><tr><td class="noborder"></td><th>Latitude</th><th>Longitude</th><th>Altitude</th><th>Accuracy</th><th>Altitude Accuracy</th><th>Heading</th><th>Speed</th><th>Timestamp</th></tr>' + 
      '<tr><td class="head">Data Value</td>' + 
      '<td class="centre">' + position.coords.latitude + '</td>' + 
      '<td class="centre">' + position.coords.longitude + '</td>' + 
      '<td class="centre">' + position.coords.altitude + '</td>' + 
      '<td class="centre">' + position.coords.accuracy + '</td>' + 
      '<td class="centre">' + position.coords.altitudeAccuracy + '</td>' + 
      '<td class="centre">' + position.coords.heading + '</td>' + 
      '<td class="centre">' + position.coords.speed + '</td>' + 
      '<td class="centre">' + new Date(position.timestamp) + '</td></tr>'+ 
      '</table>' + 
      '<p align="center"><button data-theme="h" onclick="resetLocation();">Clear GPS Location</button><br /></p>'; 


        //GET LOCATION VARIABLES FROM API 
        var lat = position.coords.latitude; 
        var lng = position.coords.longitude; 
        var yourStartLatLng = new google.maps.LatLng(lat, lng); 

        //PUT GMAPS INFORMATION INTO PAGE 
        $('#map_canvas').gmap({'center': yourStartLatLng}); 
        $('#map_canvas').gmap('option', 'zoom', 19); 
        $('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE); 
        $('#map_canvas').gmap('addMarker', { 
                 'position': yourStartLatLng, 
                 'draggable': false, 
                 'bounds': false 
                 }); 
    } 
    // onError Callback sends user an alert message and refreshes screen to load all scripts again 
    // 
    function onError(error) { 
     alert('The Freshwater application failed to get your location. Please ensure that you have a successful WIFI or 3G/4G internet connection when using the Geolocation feature. ' + 
       'The Locator screen will now be refreshed. Please attempt Geolocation again.'); 

    //navigator.geolocation.getCurrentPosition(onSuccess, onError, 
     //{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: false }); 
     //PUT A TIMER ON ERROR TO REFRESH PAGE FOR GPS 
     setTimeout("window.location+='?refreshed';", .1000); 
    } 

//RESET GEOLOCATION PAGE TO TAKE ANOTHER LOCATION READING 
    function resetLocation(){ 
     setTimeout("window.location+='?refreshed';", .1000); 
    } 

    //ATTACH FUNCTION TO BUTTON TO CALL GEOLOCATION 
    function getLocation() { 
     navigator.geolocation.getCurrentPosition(onSuccess ,onError, 
     { timeout: 1000, enableHighAccuracy: true }); 
    } 
</script> 

我知道這肯定是我從網頁上刪除它們和測試頁面加載時間所造成的滯後地理位置通話。有沒有人遇到同樣的問題?有沒有人有一個想法,爲什麼它會嚴重影響頁面加載時間?

回答

0

在這裏面對一瞬間的一巴掌。剛剛意識到這是通過javascript加載的Google Map Api導致的問題。我試着通過在頁面中進一步加載外部腳本來解決它,但我只經歷了小的改進。

catch 22是我需要在頁面中調用這個JS。是否有可能在頁面加載外部js腳本時顯示加載條/圖形顯示,以便在澳大利亞相對「通常」的連接速度下載的至少幾秒內發生什麼?

+0

我曾嘗試使用getScript加載Google maps API,但它無法工作,因爲document.write不允許在異步加載的外部腳本上進行,除非它是明確打開的。 我很難找到如何解決這個問題...... –