在Cordova/PhoneGap 3.4环境中使用地理定位插件有一点问题。我没有在onDeviceReady中加载地理定位API,因为它依赖于加载谷歌地图API,我非常确定任何提交到应用商店的应用程序将被拒绝,如果它在初始加载时从互联网请求(任何人都可以自由地确认或反驳这一点)。
我使用的是Jquery Mobile 1.4.2,并将地理位置代码放在一个单独的'locator‘页面上,该页面不会通过ajax加载。然后我调用geolocation on按钮,在Google Map上显示用户的位置。
我正在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>我知道肯定是地理位置调用导致了延迟,因为我从页面中删除了它们,并测试了页面加载时间。有没有人遇到过同样的问题?有没有人知道为什么它会对页面加载时间造成如此严重的影响?
发布于 2014-04-28 21:48:31
就在这一刻,我被打了个耳光。我刚刚意识到是通过javascript加载的Google Map Api导致了这个问题。我试着通过加载页面下面的外部脚本来解决这个问题,但我只体验到了很小的改进。
陷阱22是我需要在页面中调用这个JS。是否有可能在页面加载外部js脚本时显示加载条/图形显示,以便在澳大利亚以相对“一般”的连接速度下载的几秒钟内至少发生了一些事情?
https://stackoverflow.com/questions/23340117
复制相似问题