搜索
首页web前端H5教程html5指南（4）-使用Geolocation的详解

html5指南（4）-使用Geolocation的详解

黄舟
黄舟
Mar 22, 2017 pm 04:09 PM

　　今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法：

getCurrentPosition(callback,errorCallback,options)：获取当前位置；

watchPosition(callback,error,options)：开始监控当前位置；

clearWatch(id)：停止监控当前位置。

 　　note：下面例子使用的浏览器是chrome，使用其他浏览器我不能保证运行结果和例子显示的结果一致。

　　1.获取当前位置

　　我们将使用getCurrentPosition方法获取当前位置，位置信息不会以结果的形式直接返回，我们需要使用callback函数进行处理。在获取坐标的过程中会有些延迟，还会问你要访问权限。我们来看下面的例子：

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
    </table>
    <script>
        navigator.geolocation.getCurrentPosition(displayPosition);        
        function displayPosition(pos) {            
        var properties = [&#39;longitude&#39;, &#39;latitude&#39;, &#39;altitude&#39;, &#39;accuracy&#39;, &#39;altitudeAccuracy&#39;, &#39;heading&#39;, &#39;speed&#39;];            
        for (var i = 0, len = properties.length; i < len; i++) {                
        var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
               
            }
            document.getElementById(&#39;timestamp&#39;).innerHTML = pos.timestamp;
        }    </script></body></html>

　　返回的position对象包含两个属性，coords：返回坐标信息；timestamp：获取坐标信息的时间。其中coords又包括下面属性：latitude：纬度；longitude：经度；altitude：高度；accuracy：精确度（米）；altitudeAccuracy：高度精确度（米）；heading：行进方向；speed：行进速度（米/秒）。

　　并不是所有的信息都会返回，这取决于你承载浏览器的设备。像有GPS、加速器、罗盘的移动设备会返回大部分信息，家用电脑就不行了。家用电脑获取的位置信息，取决于所处的网络环境或者是wifi。下面我们看上例的运行结果。

点击允许，获取坐标信息。

 　　2.处理异常

 　　现在我们介绍getCurrentPosition的异常处理，他是通过使用errorCallback回调函数实现的。函数返回的参数error包含两个属性，code：错误类型的代码；message：错误信息。code包含三个值：1：用户没有授权使用geolocation；2：无法获取坐标信息；3：获取信息超时。

　　下面我们看个例子：

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <script>
        navigator.geolocation.getCurrentPosition(displayPosition, handleError);        
        function displayPosition(pos) {            
        var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];            
        for (var i = 0; i < properties.length; i++) {                
        var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
            }
            document.getElementById("timestamp").innerHTML = pos.timestamp;
        }        function handleError(err) {
            document.getElementById("errcode").innerHTML = err.code;
            document.getElementById("errmessage").innerHTML = err.message;
        }    </script></body></html>

　　拒绝授权，运行结果：

 　　

　　3.使用geolocation可选参数项

 　  getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用，enableHighAccuracy：使用最好的效果；timeout：超时时间（毫秒）；maximumAge：指定缓存时间（毫秒）。我们来下下面的例子：

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <script>
        var options = {
            enableHighAccuracy: false,
            timeout: 2000,
            maximumAge: 30000
        };
        navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);        
        function displayPosition(pos) {            
        var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];            
        for (var i = 0; i < properties.length; i++) {                
        var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
            }
            document.getElementById("timestamp").innerHTML = pos.timestamp;
        }        function handleError(err) {
            document.getElementById("errcode").innerHTML = err.code;
            document.getElementById("errmessage").innerHTML = err.message;
        }    </script></body></html>

　　4.监视位置变化

 　　下面我们介绍使用watchPosition方法实现位置变化的监视，他的使用方法和getCurrentPosition一样。我们来看例子：

<!DOCTYPE HTML><html><head>
    <title>Example</title>
    <style>
        table{border-collapse: collapse;}
        th, td{padding: 4px;}
        th{text-align: right;}
    </style></head><body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="longitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altitudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timestamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <button id="pressme">Cancel Watch</button>
    <script>
        var options = {
            enableHighAccuracy: false,
            timeout: 2000,
            maximumAge: 30000
        };        var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
        
        document.getElementById("pressme").onclick = function (e) {
            navigator.geolocation.clearWatch(watchID);
        };        function displayPosition(pos) {            
        var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];            
        for (var i = 0; i < properties.length; i++) {                
        var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
            }
            document.getElementById("timestamp").innerHTML = pos.timestamp;
        }        function handleError(err) {
            document.getElementById("errcode").innerHTML = err.code;
            document.getElementById("errmessage").innerHTML = err.message;
        }    </script></body></html>

以上是html5指南（4）-使用Geolocation的详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
了解H5代码：HTML5的基本原理了解H5代码：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术，提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等，增强了网页结构和SEO。2.支持多媒体元素和，无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性，简化了验证过程。4.提供了离线和本地存储功能，提升了网页性能和用户体验。

H5代码：Web开发人员的最佳实践H5代码：Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括：1.使用正确的DOCTYPE声明和字符编码；2.采用语义化标签；3.减少HTTP请求；4.使用异步加载；5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5：网络标准和技术的发展H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

显示更多

热门话题

gmail邮箱登陆入口在哪里
7532
15
CakePHP 教程
1379
52
steam的账户名称是什么格式
82
11
win11激活密钥永久
55
19
NYT连接提示和答案
21
79
显示更多