获取浏览器的地理位置信息

最新推荐文章于 2024-05-13 09:59:28 发布

即将入土的羸弱老年人

最新推荐文章于 2024-05-13 09:59:28 发布

阅读量1w

点赞数 2

分类专栏： Web HTML Note 文章标签： Geolocation HTML5 Web

本文链接：https://blog.csdn.net/qq_36823300/article/details/101629800

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

有些应用程序需要获取用户的地理位置信息，比较经典的例子就是在显示地图时标注自己的当前位置。过去，获取用户的地理位置信息需要借助第三方地址数据库或专业的开发包（如Google Gears API）。HTML5定义了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了极大的便利。

1、概述

HTML5 Geolocation API 定义了与主机设备的位置信息相关的高层接口。

1）什么是浏览器的地理位置

浏览器的地理位置实际上就是安装浏览器的硬件设备的位置，如经纬度。位置信息的通常来源包括以下几种。

GPS（全球定位系统）：这种方式可以提供很精确的定位，但需要专门的硬件设备，定位效率也不高。
IP地址：多用于计算机设备，定位并不准确。
无线射频标签（Radio Frequency Identification，RFID）：可以通过读卡器的信号、报文到达时间和定位器等数据确定标签的位置。
WiFi：无线上网时，可以通过Wi-Fi热点（AP或无线路由器）来定位客户端设备。
GSM/CDMA小区标识码：可以根据手机用户的基站数据定位手机设备。
用户输入：除了以上方法外，还允许用户自定义位置信息。

提示：通过不同渠道获得的浏览器的地理位置信息是有误差的，因此并不能保证Geolocation API 返回的是设备的实际位置。

2）浏览器对获取地理位置信息的支持情况

在JavaScript中可以使用navigator.geolocation属性检测浏览器对获取地理位置信息的支持情况。如果navigator.geolocation等于True，则表明当前浏览器支持获取地理位置信息；否则表明不支持。

在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持获取地理位置信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <button id="check" onclick="check();">检测浏览器是否支持获取地理位置信息</button>

    <script>
        function check() {
            if (navigator.geolocation) {
                alert("您的浏览器浏览器支持获取地理位置信息。");
            } else {
                alert("您的浏览器浏览器不支持获取地理位置信息。");
            }
        }
    </script>

</body>

</html>

**各主流浏览器对获取地理位置信息的支持情况**
浏览器	对获取地理位置信息的支持情况
Chrome	5.0及以后的版本支持
Firefox	3.5及以后的版本支持
Internet Explorer	9.0及以后的版本支持
Opera	10.6及以后的版本支持
Safari	5.0及以后的版本支持

另外，安装下列操作系统的手机设备也支持获取地理位置信息。

Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian（S60 3rd & 5th generation）
Blackberry OS 6
Maemo

2、获取地理位置信息

下面介绍使用Geolocation API 获取地理位置信息的具体方法。

1）getCurrentPosition()方法

调用getCurrentPosition()方法可以获取地理位置信息，也就是经纬度。getCurrentPosition()方法的语法如下。

var retval = geolocation.getCurrentPosition(successCallback, errorCallback, options);

参数说明如下。

successCallback：当成功获取地理位置信息时使用的回调函数句柄。

回调函数successCallback有一个参数position对象，其中包含获取到的地理位置信息。position对象包含2个属性，如下表所示。

**position对象的属性**
属性	说明
coords	包含地理位置信息的coordinates对象。coordinates对象包含7个属性，如下表所示
timestamp	获取地理位置信息的时间

**coordinates对象的属性**
属性	说明
accuracy	latitude和longitude属性的精确性，单位是m
altitude	海拔
altitudeAccuracy	altitude属性的精确性
heading	朝向，即设备正北顺时针前进的方位
latitude	纬度
longitude	经度
speed	设备外部环境的移动速度，单位是m/s

errorCallback：可选参数，当获取地理位置信息失败时调用的回调函数句柄。

回调函数errorCallback包含一个positionError对象参数，positionError对象包含两个属性，如下表所示。

**positionError对象的属性**
属性	说明
code	整数，错误编号
message	错误描述

如果不处理错误，则可以在调用getCurrentPosition()方法时，在errorCallback参数的位置使用null。

options：可选参数，是一个positionOptions对象，用于指定获取用户位置信息的配置参数。

positionOptions对象的数据格式为JSON，有3个可选的属性，如下表所示。

**positionOptions对象的属性**
属性	说明
enableHighAccuracy	布尔值，表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间
timeout	整数，超时时间，单位为ms，表示浏览器需要在指定的时间内获取位置信息，如果超时则会触发errorCallback
maximumAge	整数，表示浏览器重新获取位置信息的时间间隔

使用getCurrentPosition()方法获取地理位置信息。（翻墙）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <p id="demo">单击按钮获取你的位置信息</p>
    <button onclick="getLocation();">获取你的位置信息</button>

    <script>
        var x = document.getElementById('demo');

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "你的浏览器不支持Geolocation API。";
            }
        }

        function showPosition(position) {
            x.innerHTML = "纬度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude;
        }
    </script>

</body>

</html>

提示：单击此按钮时，浏览器会询问用户是否允许该网站获取你的位置信息。单击“允许”按钮才可以成功获取地理位置信息。

显示经纬度很不直观，非专业人士很难直接定位，可以利用Google地图来显示当前位置的地图，这里就不演示了，有兴趣的可以自己去尝试。

2）watchPosition()方法

调用watchPosition()方法可以监听和跟踪客户端的地理位置信息。watchPosition()方法的语法如下。

var watchId= geolocation.watchPosition(successCallback, errorCallback, options);

watchPosition()方法的参数与getCurrentPosition()方法的参数相同，watchPosition()方法和getCurrentPosition()方法的主要区别是因为它会持续告诉用户位置的改变，所以基本上它一直在更新用户的位置。用户在移动时，这个功能会非常有利于追踪用户的位置。

使用watchPosition()方法获取地理位置信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <p id="demo">单击按钮获取你的位置信息</p>
    <button onclick="getLocation();">获取你的位置信息</button>

    <script>
        var x = document.getElementById('demo');

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(showPosition);
            } else {
                x.innerHTML = "你的浏览器不支持Geolocation API。";
            }
        }

        function showPosition(position) {
            x.innerHTML = "纬度：" + position.coords.latitude + "<br>经度：" + position.coords.longitude;
        }
    </script>

</body>

</html>

3）clearWatch()方法

调用clearWatch()方法可以停止监听和跟踪客户端的地理位置信息。通常与watchPosition()方法结合使用。clearWatch的语法如下。

var retval = geolocation.clearWatch(watchId);

参数watchId通常是watchPosition()方法的返回值，即停止该watchPosition()方法对地理位置信息的监听和跟踪。

即将入土的羸弱老年人

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
获取浏览器的地理位置信息

有些应用程序需要获取用户的地理位置信息，比较经典的例子就是在显示地图时标注自己的当前位置。过去，获取用户的地理位置信息需要借助第三方地址数据库或专业的开发包（如Google Gears API）。HTML5定义了Geolocation API规范，可以通过浏览器获取用户的地理位置，这无疑给有相关需求的用户提供了极大的便利。1、概述HTML5 Geolocation API 定义了与主...
复制链接

扫一扫