`
zlpx
  • 浏览: 156157 次
  • 性别: 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获取地理位置信息实例

    HTML5 Geolocation是HTML5提供的一个标准API,允许网页和应用获取用户的地理位置信息,这对于开发基于用户位置的服务应用具有重要意义。下面将详细介绍HTML5 Geolocation相关知识点: 一、HTML5 Geolocation的核心...

    基于Html5 中 geolocation API 开发的交友应用网站.zip

    "基于Html5中geolocation API开发的交友应用网站"这一标题揭示了我们讨论的主题,即一个利用HTML5的Geolocation API构建的在线社交平台。Geolocation API是HTML5的一项重要功能,它允许网页应用获取用户的地理位置...

    geolocation 根据地理坐标获取具体位置信息

    在现代Web开发中,`geolocation` API 是一个至关重要的工具,它允许网站和服务获取用户的地理位置信息,从而提供更加个性化的服务和体验。这个API是HTML5的一个特性,旨在为浏览器提供一种标准化的方法来访问设备的...

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

    HTML5的Geolocation API是现代Web开发中用于获取设备地理位置信息的重要工具,它允许网页应用获取用户的精确位置,如经纬度、海拔等。这个API在移动应用和地图服务中尤其常见,例如集成Google Maps API来展示用户的...

    HTML5 Geolocation API的正确使用方法

    HTML5 Geolocation API是Web开发中的一个重要工具,它允许网页应用程序获取访问设备的地理位置信息,如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分,为开发者提供了无须借助外部插件就能实现地理位置服务...

    html5定位获取当前位置并在百度地图上显示

    这项技术主要依赖于Geolocation API,它在浏览器环境中提供了获取用户位置的能力。在本教程中,我们将深入探讨如何利用HTML5的定位功能获取用户当前位置,并将这些信息在百度地图上进行展示。 首先,我们要了解...

    Python-Seeker利用HTML5JavascriptJQuery和PHP以高精度获取设备信息和GeoLocation

    2. JavaScript通过HTML5的GeoLocation API获取到用户的GPS坐标。 3. 使用jQuery,这些坐标和其他设备信息(如浏览器类型、操作系统等)被封装成JSON格式并发送到服务器。 4. PHP服务器接收并处理这些数据,可能将其...

    HTML5 api 调用示例

    6. **Geolocation API**:允许网页获取用户的地理位置信息,通常用于个性化服务或导航应用。`navigator.geolocation.getCurrentPosition()`方法可以请求用户的当前位置。 7. **WebSocket API**:提供双向通信能力,...

    js腾讯地图api获取坐标定位地理位置_soso地图api获取坐标

    在IT行业中,JavaScript(简称js...在JavaScript中使用腾讯地图API获取坐标定位地理位置,首先需要在HTML中引入腾讯地图的JavaScript库。这通常通过在标签内添加一个标签完成,指定腾讯地图的CDN链接。例如: ```html ...

    web页面获取用户位置信息

    在HTML5中,Geolocation API为浏览器提供了获取用户地理位置的能力。通过调用`navigator.geolocation`对象的方法,我们可以请求用户的地理位置。例如,`watchPosition()`和`getCurrentPosition()`这两个方法分别用于...

    HTML5Geolocation-英文原版.zip

    1. **获取用户位置**:使用`navigator.geolocation`对象的`watchPosition`或`getCurrentPosition`方法,可以周期性地或者一次性获取用户的经纬度坐标。开发者可以通过回调函数处理这些位置信息。 2. **权限管理**:...

    HTML5基础,第3部分:HTML5 API的威力

    在这个例子中,可能会展示如何使用Geolocation API获取地理位置信息,并通过WebWorker在后台处理数据,提高用户体验。 总的来说,HTML5的Geolocation API和WebWorker API极大地增强了网页应用的功能性和性能。...

    基于HTML5_Geolocation_考勤管理系统.doc

    Geolocation API是HTML5提供的一种获取用户当前位置的API,可以通过浏览器获取用户的当前位置,并将其应用于各种应用场景中,如考勤管理系统、导航系统等。 知识点4: 考勤管理系统的设计与实现 本文完成了一个基于...

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

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

    基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)

    开发者可以使用这个API获取用户的地理位置,用于提供相关服务,比如地图定位、天气预报等。 2. HTML5位置服务兼容性:并不是所有的浏览器都支持Geolocation API。本文的代码首先检查浏览器是否支持该API,如果支持...

    geolocation:使用 PHP 实现 Google Geolocation API

    Google Geolocation API 是一个服务,允许开发者获取设备的地理位置信息,通常用于移动应用和网页应用,以便提供基于位置的服务。 **描述解析:** 描述中的“地理定位”指的是通过技术手段确定设备在地球表面的...

    Geolocation(Google Map API).zip

    JavaScript游戏通常利用HTML5 Canvas和WebGL等技术创建图形界面,结合Geolocation API,可以创建出类似“寻宝游戏”或地理挑战类的游戏,用户需要根据自己的实际位置去完成特定任务。 在文件列表中的"geolocation_...

    HTML 5基础之HTML 5 API的威力

    - 这个API与HTML5中的`&lt;video&gt;`和`&lt;audio&gt;`元素配合使用,提供了更为简便的方式来播放多媒体内容。 ##### 4. 历史记录API - 它使开发者能够更精细地控制用户浏览历史,比如记录用户的导航动作、恢复之前的页面...

    html5参考手册 api.zip_Html5API

    7. **Geolocation API**:获取用户的地理位置信息,常用于地图应用或个性化服务。 8. **WebSocket API**:用于创建持久性的客户端与服务器之间的连接,支持实时数据传输。 9. **拖放(Drag and Drop)API**:使...

Global site tag (gtag.js) - Google Analytics