AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

html5指南--4.使用Geolocation

2012-09-07 1095
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 　　今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下列方法： getCurrentPosition(callback,errorCallback,options)：获取当前位置； watchPosition(callback,error,options)：开始监控当前位置； clearWatch(id)：停止监控当前位置。

　　今天我们要学习的是使用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 = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
            for (var i = 0, len = properties.length; i < len; i++) {
                var value = pos.coords[properties[i]];
                document.getElementById(properties[i]).innerHTML = value;
            }
            document.getElementById('timestamp').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>

　　当点击Cancel Watch按钮时，停止监视。

demo下载地址：Html5Guide.Geolocation.zip

文章标签：
Web App开发
监控
定位技术
HTML5
移动开发
缓存
关键词：
HTML Geolocation
bill.kang
目录
相关文章
游客44yag4ft7nckq
|
28天前
|
移动开发 监控 定位技术
HTML5 Geolocation（地理定位）6
`getCurrentPosition()` 方法用于获取设备当前地理位置，成功时返回包含多个属性的对象，如纬度、经度、精度等。`watchPosition()` 持续监控位置变化，适合移动应用；`clearWatch()` 则停止位置监控。示例代码展示了如何使用 `watchPosition()` 获取并显示当前位置信息。
游客44yag4ft7nckq
25 1
游客44yag4ft7nckq
|
29天前
|
传感器 移动开发 定位技术
HTML5 Geolocation（地理定位）2
`getCurrentPosition()`方法的第二个参数用于处理获取用户位置时可能出现的错误。示例中的`showError`函数通过`error.code`区分不同类型的错误，并显示相应的提示信息。错误类型包括：用户拒绝、位置不可用、请求超时和未知错误。此外，还展示了如何使用返回的经纬度在谷歌地图中显示位置的示例。
游客44yag4ft7nckq
26 1
游客44yag4ft7nckq
|
29天前
|
移动开发 定位技术 iOS开发
HTML5 Geolocation（地理定位）3
本页介绍如何在地图上显示用户位置，并利用地理定位提供给定位置的相关信息，如更新本地信息、显示周边兴趣点等。通过 `getCurrentPosition()` 方法可获取用户当前位置的详细数据，包括经纬度、精度等。此外，`watchPosition()` 和 `clearWatch()` 方法分别用于持续跟踪用户位置变化和停止位置跟踪。示例代码展示了如何使用这些方法实现位置跟踪功能。
游客44yag4ft7nckq
25 1
游客44yag4ft7nckq
|
28天前
|
移动开发 定位技术 HTML5
HTML5 Geolocation（地理定位）5
本示例展示了如何利用获取的经纬度数据，在谷歌地图中以静态图片形式显示用户位置。此方法可扩展用于更新本地信息、展示周边兴趣点及实现车载导航系统等应用。
游客44yag4ft7nckq
23 0
游客44yag4ft7nckq
|
28天前
|
移动开发 定位技术 HTML5
HTML5 Geolocation（地理定位）4
`getCurrentPosition()` 方法的第二个参数用于处理获取用户位置时可能出现的错误。通过定义 `showError` 函数，可以根据不同的错误代码（如权限被拒、位置不可用、超时等）显示相应的错误信息。
游客44yag4ft7nckq
25 0
游客44yag4ft7nckq
|
29天前
|
Web App开发 移动开发 定位技术
HTML5 Geolocation（地理定位）1
HTML5 Geolocation API 用于获取用户的地理位置，需用户同意才可使用。支持的浏览器包括IE9+、Firefox、Chrome、Safari 和 Opera。此API在GPS设备上定位更精准。示例代码展示了如何使用getCurrentPosition()方法获取并显示用户的位置信息。
游客44yag4ft7nckq
27 0
html的七十二变
|
3月前
|
存储 移动开发 定位技术
HTML5 Geolocation（地理定位）优化到最高精度
HTML5 Geolocation API 可让网页访问用户的地理位置信息。为优化地理定位精度，需考虑设备、浏览器设置、网络状况及编码实现。使用 `enableHighAccuracy` 选项请求高精度，并确保设备开启 GPS，网络良好。结合多种数据源（如 GPS、Wi-Fi）可提高准确性。利用 `watchPosition` 定期更新位置，并妥善处理定位错误。务必遵循用户隐私原则，获取同意并遵守相关法规。这样可有效提升地理定位的精度与用户体验。
html的七十二变
282 3
秋天风景
HTML5 地理位置定位（HTML5 Geolocation）原理及应用
　　地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。
秋天风景
1410 0
范大脚脚
|
移动开发 API 定位技术
【HTML5初探之Geolocation API】让我们获取女神的地址
范大脚脚
1842 0
科技小先锋
|
Web App开发 移动开发 定位技术
HTML5 地理位置定位（HTML5 Geolocation）原理及应用
科技小先锋
1196 0

热门文章

最新文章

  • 1
    jQuery从html代码中获取对应标签的写法
  • 2
    MDN Web技术文档 - HTML 元素
  • 3
    uni-app(移动端) 修改(动态修改)根节点html的样式
  • 4
    HTML5 &lt;script&gt;元素async,defer异步加载
  • 5
    初识HTML
  • 6
    vs 2010 支持 html5
  • 7
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 8
    关于html5--localStorage 储存json
  • 9
    谈谈HtmlControl与WebControl的区别与用途
  • 10
    19个基于 HTML5 和 CSS3 开发的优秀应用程序
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    139
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    75
  • 3
    好看的html网站维护源码
    244
  • 4
    html+echars图表加日期检索
    61
  • 5
    html+echars的统计报表
    63
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    66
  • 7
    一种pug与html相互转换的工具
    100
  • 8
    android TextView HTML 的效果
    46
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    144
  • 10
    HTML5/CSS3粒子效果进度条代码
    70

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    DataWorks售前咨询