`
zlpx
  • 浏览: 153529 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5中使用geolocation API获取用户的位置

 
阅读更多

下面的例子展示了如何在在HTML5中通过geolocation API 获取用户的位置(经度,纬度)。

 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function body_onLoad() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geo_onSuccess, geo_onError);
            } else {
                geo_onError();
            }
        }
 
        function geo_onSuccess(pos) {
            document.getElementById("timestamp").innerHTML = new Date().toLocaleString();
            document.getElementById("accuracySpan").innerHTML = pos.coords.accuracy;
            document.getElementById("altitudeSpan").innerHTML = pos.coords.aktitude;
            document.getElementById("altitudeAccuracySpan").innerHTML = pos.coords.altitudeAccuracy;
            document.getElementById("headingSpan").innerHTML = pos.coords.heading;
            document.getElementById("latitudeSpan").innerHTML = pos.coords.latitude;
            document.getElementById("longitudeSpan").innerHTML = pos.coords.longitude;
            document.getElementById("speedSpan").innerHTML = pos.coords.speed;
        }
 
        function geo_onError() {
            alert("Unable to get latitude/longitude, or browser does not support geolocation API.");
        }
    </script>
</head>
<body onload="body_onLoad();">
 
    <h1>navigator.geolocation</h1>
    <table>
    <tr>
        <th>accuracy:</th>
        <td><span id="accuracySpan"></span></td>
    </tr>
    <tr>
        <th>altitude:</th>
        <td><span id="altitudeSpan"></span></td>
    </tr>
    <tr>
        <th>altitudeAccuracy:</th>
        <td><span id="altitudeAccuracySpan"></span></td>
    </tr>
    <tr>
        <th>heading:</th>
        <td><span id="headingSpan"></span></td>
    </tr>
    <tr>
        <th>latitude:</th>
        <td><span id="latitudeSpan"></span></td>
    </tr>
    <tr>
        <th>longitude:</th>
        <td><span id="longitudeSpan"></span></td>
    </tr>
    <tr>
        <th>speed:</th>
        <td><span id="speedSpan"></span></td>
    </tr>
    </table>
    <p id="timestamp"/>
 
</body>
</html>
 

源码下载:

 

determining-the-users-location.zip

 

分享到:
评论

相关推荐

    利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位

    本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息

    HTML5的Geolocation地理位置定位API使用教程

    在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地...

    HTML5 Geolocation API的正确使用方法

    Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息(坐标),本篇文章主要介绍了三个方法,非常具有实用价值,需要的朋友可以参考下

    Html5 Geolocation获取地理位置信息实例

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5...

    HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...

    cordova+vue+webapp使用html5获取地理位置的方法

    1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法: navigator.geolocation.getCurrentPosition(success, error, options) 参数: success: 成功得到位置信息时的回调函数,使用...

    Find-Nearest-Marketo-Office:示例展示了如何通过 HTML5 Geolocation API 根据用户的位置动态更改页面内容

    查找最近的 Marketo-Office 此示例获取用户的位置,并返回最近的 Marketo 办公室位置及其电话号码。 如果无法访问用户的位置,则脚本默认为 Marketo 的... 该示例使用和 HTML5 Geolocation API。 讨论了更多实施细节。

    HTML5获取当前地理位置并在百度地图上展示的实例

    HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API [removed] if(navigator.geolocation){ alert&#40;'浏览器...

    HTML5高级程序设计

    从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...

    完整版《HTML5高级程序设计》5

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    完整版《HTML5高级程序设计》2

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    完整版《HTML5高级程序设计》4

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    ip-geolocation-api:基于ip的地理位置探测器

    要获取IP地址位置,您将使用的 。 要生成地图,我们建议使用 。 您可以使用任何喜欢的工具来帮助您完成挑战。 因此,如果您有想要练习的东西,请随时尝试。 您的用户应该能够: 查看每个页面的最佳布局,具体取决于...

    HTML5高级程序设计.part5

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...

    完整版《HTML5高级程序设计》3

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    HTML5高级程序设计.part4

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

    HTML5高级程序设计.part1

    本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...

Global site tag (gtag.js) - Google Analytics