HTML5地理定位-Geolocation API

HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息
Geolocation API使用方法:
1.判断是否支持 navigator.geolocation
2.调用getCurrentPosition(successCallback, errorCallback, options),返回定位数据
参数说明:
参数1:successCallback 成功的回调函数,把position对象作为参数传入,position对象包含定位的相关信息

  latitude           纬度数值
  longitude          经度数值
  speed              运动的速度(假设你在地平线上运动),单位米/秒。
  accuracy           精确度单位米
  altitude           高度,单位米
  altitudeAccuracy   高度的精确地,单位米
  heading            运动的方向,相对于正北方向的角度。
 

参数2:errorCallback 出错的回调函数

  error.PERMISSION_DENIED:  用户拒绝对获取地理位置的请求。
  error.POSITION_UNAVAILABLE:  位置信息是不可用的。
  error.TIMEOUT:  请求用户地理位置超时。
  error.UNKNOWN_ERROR:  未知错误。
  

参数3:options 选项配置

  enableHighAccuracy: true   指示浏览器获取高精度的位置
  timeout: 5000              指定获取地理位置的超时时间,默认不限时,单位为毫秒
  maximumAge: 3000           最长有效期,即位置缓存

代码示例:

<script type="text/javascript">
//支持html5的浏览器才可以使用Geolocation API
//console.log(navigator.geolocation);
if(navigator.geolocation){
    //console.log("支持!");
    //参数1:
    function successFn(position) {
        //latitude  纬度
        //longitude 经度
        console.log("position",position);
        console.log(position.coords);
        console.log("纬度 ",position.coords.latitude,"经度 ",position.coords.longitude);
    }

    //参数2:
    function errorFn(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                console.log("用户拒绝对获取地理位置的请求User denied the request for Geolocation.");
                break;
            case error.POSITION_UNAVAILABLE:
                console.log("位置信息是不可用Location information is unavailable.");
                break;
            case error.TIMEOUT:
                console.log("用户的请求超时The request to get user location timed out.");
                break;
            case error.UNKNOWN_ERROR:
                console.log("未知错误An unknown error occurred.");
                break;
        }
    }

    //参数3:
    var options = {
        // 指示浏览器获取高精度的位置
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
        timeout: 5000,
        // 最长有效期,即位置缓存
        maximumAge: 3000
    }

    //返回定位数据,如果出错返回错误信息,链接超时的配置
    navigator.geolocation.getCurrentPosition(successFn,errorFn,options);
}
else{
    console.log("不支持! Geolocation is not supported by this browser.");
}

</script>

注意:google浏览器在国内无法直接定位

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5提供了获取地理位置以及定位的功能。通过Geolocation API可以访问用户的位置信息,具体实现方式如下: 首先需要使用navigator.geolocation对象来获取位置信息。该对象包含三个属性:getCurrentPosition、watchPosition和clearWatch。getCurrentPosition方法可以获取用户的当前位置信息,watchPosition方法则可以实时监控用户位置的变化。clearWatch方法用于清除watchPosition的操作。 在获取地理位置信息之前需要判断浏览器是否支持Geolocation API,可以通过以下代码进行判断: if (navigator.geolocation) { // 支持Geolocation API } else { // 不支持Geolocation API } 获取用户位置信息的代码如下: navigator.geolocation.getCurrentPosition(function(position) { // 获取到位置信息后的处理操作 }, function(error) { // 获取位置信息失败的处理操作 }); 在该方法中可以添加两个回调函数,成功获取到位置信息后会调用第一个回调函数,否则会调用第二个回调函数。 定位则是通过GPS、WIFI等技术来获取用户所在的地理位置,定位可以通过访问IP地址或者使用HTML5提供的Geolocation API实现。通过IP地址获取的精度一般不够高,而Geolocation API可以获得更加准确的地理位置信息。 总之,HTML5提供了非常方便的方式来获取用户的位置信息和定位,使得开发者可以更加灵活地利用这些信息为用户提供更好的体验服务。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值