HTM5笔记——地理位置

果冻OoO

已于 2022-05-08 10:49:00 修改

阅读量384

点赞数

文章标签： html5 前端 html

于 2022-05-08 10:45:23 首次发布

本文链接：https://blog.csdn.net/qq_42002794/article/details/124644048

版权

前言

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 LBS (Location Base Service)。

隐私

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。

获取地理信息的方式

1、IP地址

2、三维坐标：

（1）GPS（Global Positioning System，全球定位系统）。

目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：

1.美国 Global Positioning System （全球定位系统）简称GPS；
2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统）简称GALILEO（伽利略）；
4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
5.日本 Quasi-Zenith Satellite System （准天顶卫星系统）简称QZSS ；
6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。

以上6个系统中国都能使用。

（2）Wi-Fi定位：仅限于室内。

（3）手机信号定位：通过运营商的信号塔定位。

3、用户自定义数据：

对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息：

API详解

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息

1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）

position.coords.latitude纬度
position.coords.longitude经度

2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。

3、可选参数 options 对象可以调整位置信息数据收集方式

geolocation 对象

需要先确定 navigator.geolocation 是否可用：

获取当前定位

通过 getCurrentPosition() 来获取用户当前定位位置。

navigator.geolocation.getCurrentPosition(success, error, options);

success：成功得到位置信息时的回调函数，使用 Position 对象作为唯一的参数。

默认情况下，会尽快返回一个低精度结果

error：可选，获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数。

options：可选，一个 PositionOptions 对象。

enableHighAccuracy：是否使用其最高精度

false，默认值，设备会通过更快响应、更少的电量等方法来尽可能的节约资源
true，这会导致较慢的响应时间或者增加电量消耗（比如对于支持 gps 的移动设备来说）

timeout：限制返回时间
- Infinity，默认值，一直等待到获取位置为止。
maximumAge：可以返回多长时间（单位毫秒）内的缓存位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        /*navigator 导航*/
        //geolocation: 地理定位
//        window.navigator.geolocation
//        兼容处理
        if(navigator.geolocation){
//       如果支持，获取用户地理信息

//            successCallback 当获取用户位置成功的回调函数
//            errorCallback 当获取用户位置失败的回调函数

            navigator.geolocation.getCurrentPosition(successCallback,errorCallback);

        }else{
            console.log('sorry,你的浏览器不支持地理定位');
        }
        // 获取地理位置成功的回调函数
        function successCallback(position){
//            获取用户当前的经纬度
//            coords坐标
//            纬度latitude
            var wd=position.coords.latitude;
//            经度longitude
            var jd=position.coords.longitude;

            console.log("获取用户位置成功！");
            console.log(wd+'----------------'+jd);
        }
        // 获取地理位置失败的回调函数
        function errorCallback(error){
            console.log(error);
            console.log('获取用户位置失败！')
        }
    </script>
</body>
</html>

果冻OoO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTM5笔记——地理位置

前言在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 LBS (Location Base Service)。隐私HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。获取地理信息的方式1、IP地址2、三维坐标：（1）GPS（Global Positioning System，全球定位系统）。目前世界上在用或在建的第2代全球卫星导航系
复制链接

扫一扫