html5利用geolocation获取地区位置经纬度
废话不多说,先贴代码出来看看
<!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端是不可以的。贴出来与大家共学习参考!
本站遵循CC协议署名-非商业性使用-相同方式共享
转载请注明来自:优优博库
相关推荐
- html5利用geolocation获取地区位置经纬度
- Posted on 12月28日
- 在js文件中调用另外一个js 加载顺序
- Posted on 07月04日
- 牛叉的js效果
- Posted on 12月14日
- js中arguments对象详解
- Posted on 05月09日