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协议署名-非商业性使用-相同方式共享
转载请注明来自：优优博库
相关推荐
- mysql配置sql_mode中STRICT_TRANS_TABLES和STRICT_ALL_TABLES 区别
- Posted on 06月28日
- 原生js封装绑定事件和删除绑定事件
- Posted on 05月17日
- MongoDB启动报错WARNING: You are running on a NUMA machine.
- Posted on 06月27日
- mysql 数据类型 Float、Double、Decimal和Numeric 的区别
- Posted on 06月28日