navigator.geolocation getCurrentPosition在Chrome Mobile中未更新 [英] navigator.geolocation getCurrentPosition not updating in Chrome Mobile

查看:122
本文介绍了navigator.geolocation getCurrentPosition在Chrome Mobile中未更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建了一个网站(可以在 http://dev.gkr33.com 上访问),它是专为智能手机设计,并尝试使用navigator.geolocation API并通过getCurrentPosition获取您的位置。这似乎起初工作,但是如果你尝试刷新页面,它总是会带回上一次的GPS位置。我在页面上添加了一些调试信息,它抓住了getCurrentPosition返回的时间,并且在初始定位后它始终返回相同的时间(下降到毫秒)。

I have created a site (can be accessed at http://dev.gkr33.com) which is designed for a smartphone and attempts to use the navigator.geolocation api and grab your position via getCurrentPosition. This seems to work initially, however if you try to refresh the page it always brings back the last GPS position. I have added some debug information on the page which grabs the time of the getCurrentPosition return and after the initial positioning it always returns the same time (down to the millisecond).

这似乎只发生在Chrome Mobile中。如果我通过股票Android浏览器浏览网站,它每次都能正常工作。

This only seems to happen in Chrome Mobile. If I browse into the site via the stock Android browser it works fine every time.

代码如下所示;

The code is shown below;

<script type="text/javascript">
    (function ($) {
    $(document).ready(function() {
        var options = { enableHighAccuracy: true, maximumAge: 0, timeout: 60000 };
        var position;

        // empty the current html elements, not strictly necessary but
        // I'm clutching at straws
        $('#debug-latlng').empty();
        $('#debug-time').empty();
        $('#debug-address').empty();

        // Let's try and find out where we are
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(gotPos, gotErr, options ); 
        } else {
            gotErr();
        }

        // We've got our position, let's show map and update user
        function gotPos(position) {
            var info;
            info = position.coords.latitude+','+position.coords.longitude;
            $('#debug-latlng').text(info);
            $('#debug-time').text(parseTimestamp(position.timestamp));

            // the following json call will translate the longitude and
            // latitude into an address (a wrapper for google's geocode call)

            $.getJSON('http://dev.gkr33.com/api.php', { req: "getLocationInfo", latlng: $('#debug-latlng').text() }, function(json) {
                $('#debug-address').text( json['results'][0]['formatted_address'] );
            });

            var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
            var mapOptions = {
                    zoom: 12,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
            };      
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatLng, 
                title: 'You are here',
                animation: google.maps.Animation.DROP 
            });
            marker.setMap(map);
        } //gotPos


        // Trap a GPS error, log it to console and display on site
        function gotErr(error) {
            var errors = { 
                    1: 'Permission denied',
                    2: 'Position unavailable',
                    3: 'Request timeout'
                };
            console.log("Error: " + errors[error.code]);
            $('#debug-latlng').text('GPS position not available');
        } //gotErr

        // Make timestamp human readable
        function parseTimestamp(timestamp) {
            var d = new Date(timestamp);
            var day = d.getDate();
            var month = d.getMonth() + 1;
            var year = d.getFullYear();
            var hour = d.getHours();
            var mins = d.getMinutes();
            var secs = d.getSeconds();
            var msec = d.getMilliseconds();
            return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
        } // parseTimestamp     
    });         
}) (jQuery);
</script>

我玩过最大年龄和超时的各种值,但似乎没有影响到相同的位置.coords和position.time值。

I have played around with various values for the maximumAge and timeout, but nothing seems to affect the same position.coords and position.time values.

我认为Chrome Mobile可能存在问题,但我不想在此时假设太多,只需要澄清我的代码中没有出现类似muppet的比例错误。

I think there maybe an issue with Chrome Mobile, but I don't wanna assume too much at this point in time and just need clarification that I haven't made a mistake of muppet-like proportions in my code.

非常感谢您提供的任何帮助。

Many thanks for any help you can provide.

更新:我想我应该说我已经在两个Android设备上测试过了; HTC One X +和三星Galaxy Tab 7.7,结果相同。在两个股票浏览器工作正常,并在两个Chrome不刷新位置。稍后将在Apple设备上进行测试:)

UPDATE: I suppose I should have said that I have tested this on two Android devices; HTC One X+ and a Samsung Galaxy Tab 7.7 with the same result. On both the stock browser works fine, and on both Chrome doesn't refresh the position. Will test on an Apple Device later :)

推荐答案

我从来没有深究过这个问题,但我有办法解决这个问题通过使用 watchPosition 调用,并在清除 watchID 之前等待5秒钟。请检查以下代码:

I never got to the bottom of this issue, but I got a way around the problem by utilising the watchPosition call, and wrapping this in a 5 second wait before clearing the watchID. Check the code below:

var options = { enableHighAccuracy: true, maximumAge: 100, timeout: 50000 };
if( navigator.geolocation) {
   var watchID = navigator.geolocation.watchPosition( gotPos, gotErr, options );
   var timeout = setTimeout( function() { navigator.geolocation.clearWatch( watchID ); }, 5000 );
} else {
   gotErr();
}

我还没有玩过选项值或超时延迟目前,但上面的代码带回了我试过的每个平台上的准确定位信息。

I haven't played around with the "options" values or the timeout delay at the moment, but the above code brings back accurate positioning info on every platform I've tried.

希望这可以帮助有同样问题的人:)

Hope this helps someone with the same issue :)

这篇关于navigator.geolocation getCurrentPosition在Chrome Mobile中未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆