html5 判断获取定位,html5获取地理位置和定位

@H_404_7@1.H5地理位置定位功能

@H_404_7@首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意

@H_404_7@

@H_404_7@functiongetLocation(){if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert("浏览器不支持地理定位。"); } }

@H_404_7@2.showPosition()获取用户经度纬度

@H_404_7@

functionshowPosition(position){

console.log(position);var lat = position.coords.latitude; //纬度

var lag = position.coords.longitude; //经度

console.log(‘纬度:‘+lat+‘,经度:‘+lag);

}

@H_404_7@3.执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧!!!

@H_404_7@4.补充showError(),这个函数是报错信息

showError(error){

console.log(error.code)

}

functionshowError(error){switch(error.code) {caseerror.PERMISSION_DENIED:

alert("定位失败,用户拒绝请求地理定位");break;caseerror.POSITION_UNAVAILABLE:

alert("定位失败,位置信息是不可用");break;caseerror.TIMEOUT:

alert("定位失败,请求获取用户位置超时");break;caseerror.UNKNOWN_ERROR:

alert("定位失败,定位系统失效");break;

}

}

@H_404_7@

@H_404_7@接下来用百度和谷歌提供的接口,利用获取到的经纬度查看具体的地址信息

@H_404_7@用到了jq的ajax封装,所以得引用jq,

@H_404_7@

@H_404_7@百度的:

functionshowPosition(position){//将我们获取到的经纬度保存到变量中

var latlon = position.coords.latitude+‘,‘+position.coords.longitude;//baidu接口

var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"$.ajax({

type:"GET",dataType:"jsonp",url: url,beforeSend:function(){

$("#baidu").html(‘正在定位...‘);

},success:function(data) {if(data.status==0){

$("#baidu").html(data.result.formatted_address);

}

},error:function(XMLHttpRequest,textStatus,errorThrown) {

$("#baidu").html(latlon+"地址位置获取失败");

}

});

});

@H_404_7@谷歌

@H_404_7@谷歌同上,接口如下;

var url=‘http://maps.google.cn/maps/api/geocode/json?latlng=‘+latlon+‘&language=CN‘;

成功回调:

success:function(data) {if(data.status==‘OK‘){var results =data.results;

$.each(results,function(index,array){if(index==0){

$("#google_geo").html(array[‘formatted_address‘]);

}

});

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值