html5利用geolocation获取地区位置经纬度

html5利用geolocation获取地区位置经纬度

作者:myadmin |  时间:2015-12-28 |  浏览:1455 |  0 条评论

html获取用户所在地区位置经纬度

废话不多说,先贴代码出来看看

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <!-- <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> -->
    <script src="./jquery.js"></script>
    <script>var jQuery = window.jQuery = window.jQuery || $;</script>
    <script src="./jquery.cookie.min.js"></script>
</head>
<body>
    Hello {{'World'}}!
    Hello {{yourname || 'World'}}!
    <span id="curr_pos"></span>
    <span class="loc_refresh"></span>
</body>
<script>
    var app = {};
    // 获取用户地理位置
    (function($, app) {
        var watchId;
        function getLocation() {
            $('.loc_refresh').hide();
            if (navigator.geolocation) {
                $('#curr_pos').text('系统正在获取您的位置……');
                var option={
                    // 指示浏览器获取高精度的位置,默认为false
                    enableHighAcuracy: true,
                    // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
                    timeout: 8000,
                };
                navigator.geolocation.getCurrentPosition(showPosition, showError,option);
                //watchId = navigator.geolocation.watchPosition(showPosition, showError,option);
            } else {
                $('#curr_pos').text('您的浏览器不支持地理定位!');
            }
        }

        function showPosition(position) {
            alert("经度 纬度 获取成功!");
            alert("经度:"+position.coords.longitude+"纬度"+position.coords.latitude);
            
            return true;
            
            /******* 获取用户地理位置成功后的处理 start *********/
            //navigator.geolocation.clearWatch(watchId);
            $.ajax({
                url: 'http://www.uuboku.com/372.html?latitude=' + position.coords.latitude + '&longitude=' + position.coords.longitude,
                dataType: 'json',
                success: function(data) {
                    $.cookie('is_navigator', 1,{path:'/'});
                    if (!$.cookie('navigator_address')) {
                        $('#curr_pos').text('浏览器定位失败!');
                    } else {
                        $('#curr_pos').text($.cookie('navigator_address'));
                    }
                    $('.loc_refresh').show();

                    var city = data.data.city;
                    if (city != '') {
                        if(confirm('系统定位到您在' + city +',是否切换?')) {
                            $.ajax({
                                url: 'http://www.uuboku.com/372.html?city=' + city,
                                dataType: 'json',
                                success: function(data) {
                                    var indexReg = new RegExp('index');
                                    if(location.hash == '' || location.hash.match(indexReg)) {
                                        $("#index_v .logo a").text(city);
                                        app.util.loadFilter();
                                        location.href = '#index';
                                    }else{
                                        location.href = location.hash+"?"+Math.random();
                                    }
                                    return false;
                                } 
                            });
                        }
                    }
                    return false;
                }
            });
            /******* 获取用户地理位置成功后的处理 end *********/
        }

        function showError(error) {
            var msg = '';
            switch (error.code) {
                case error.PERMISSION_DENIED: //用户不允许地理定位
                    msg = '用户不允许地理定位!';
                    //$('#index_curr_pos').text('用户不允许地理定位');
                    break;
                case error.POSITION_UNAVAILABLE: //无法获取当前位置
                    msg = '无法获取当前位置!';
                    //navigator.geolocation.getCurrentPosition(showPosition, showError);
                    break;
                case error.TIMEOUT: //操作超时
                    msg = '操作超时!';
                    //navigator.geolocation.getCurrentPosition(showPosition, showError);
                    break;
                case error.UNKNOWN_ERROR: //未知错误
                    msg = '未知错误!';
                    break;
            }
            alert(msg);
            $('#curr_pos').text(msg);
            $('.loc_refresh').show();
        }
        app.getLocation = getLocation;

    })(jQuery, app);
    app.getLocation();
</script>
</html>

以上所有代码(包括js类库)如下,欢迎下载使用:

http://www.uuboku.com/wp-content/uploads/2015/12/geolocation.zip

以上代码偶已亲测,可以再移动端执行,在pc端是不可以的。贴出来与大家共学习参考!

html获取用户所在地区位置经纬度

标签:

相关推荐
更多

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>