下面的例子展示了如何在在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提供的一个标准API，允许网页和应用获取用户的地理位置信息，这对于开发基于用户位置的服务应用具有重要意义。下面将详细介绍HTML5 Geolocation相关知识点： 一、HTML5 Geolocation的核心...
"基于Html5中geolocation API开发的交友应用网站"这一标题揭示了我们讨论的主题，即一个利用HTML5的Geolocation API构建的在线社交平台。Geolocation API是HTML5的一项重要功能，它允许网页应用获取用户的地理位置...
在现代Web开发中，`geolocation` API 是一个至关重要的工具，它允许网站和服务获取用户的地理位置信息，从而提供更加个性化的服务和体验。这个API是HTML5的一个特性，旨在为浏览器提供一种标准化的方法来访问设备的...
HTML5的Geolocation API是现代Web开发中用于获取设备地理位置信息的重要工具，它允许网页应用获取用户的精确位置，如经纬度、海拔等。这个API在移动应用和地图服务中尤其常见，例如集成Google Maps API来展示用户的...
HTML5 Geolocation API是Web开发中的一个重要工具，它允许网页应用程序获取访问设备的地理位置信息，如经纬度坐标、高度、速度等。这个API是HTML5标准的一部分，为开发者提供了无须借助外部插件就能实现地理位置服务...
这项技术主要依赖于Geolocation API，它在浏览器环境中提供了获取用户位置的能力。在本教程中，我们将深入探讨如何利用HTML5的定位功能获取用户当前位置，并将这些信息在百度地图上进行展示。 首先，我们要了解...
在IT行业中，JavaScript（简称js...在JavaScript中使用腾讯地图API获取坐标定位地理位置，首先需要在HTML中引入腾讯地图的JavaScript库。这通常通过在标签内添加一个标签完成，指定腾讯地图的CDN链接。例如： ```html ...
2. JavaScript通过HTML5的GeoLocation API获取到用户的GPS坐标。 3. 使用jQuery，这些坐标和其他设备信息（如浏览器类型、操作系统等）被封装成JSON格式并发送到服务器。 4. PHP服务器接收并处理这些数据，可能将其...
6. **Geolocation API**：允许网页获取用户的地理位置信息，通常用于个性化服务或导航应用。`navigator.geolocation.getCurrentPosition()`方法可以请求用户的当前位置。 7. **WebSocket API**：提供双向通信能力，...
在HTML5中，Geolocation API为浏览器提供了获取用户地理位置的能力。通过调用`navigator.geolocation`对象的方法，我们可以请求用户的地理位置。例如，`watchPosition()`和`getCurrentPosition()`这两个方法分别用于...
1. **获取用户位置**：使用`navigator.geolocation`对象的`watchPosition`或`getCurrentPosition`方法，可以周期性地或者一次性获取用户的经纬度坐标。开发者可以通过回调函数处理这些位置信息。 2. **权限管理**：...
在这个例子中，可能会展示如何使用Geolocation API获取地理位置信息，并通过WebWorker在后台处理数据，提高用户体验。 总的来说，HTML5的Geolocation API和WebWorker API极大地增强了网页应用的功能性和性能。...
Geolocation API是HTML5提供的一种获取用户当前位置的API，可以通过浏览器获取用户的当前位置，并将其应用于各种应用场景中，如考勤管理系统、导航系统等。 知识点4: 考勤管理系统的设计与实现 本文完成了一个基于...
在手持设备如此普遍的今天，位置信息对于应用程序来讲是极其重要的，打车应用可以根据用户的位置信息呼叫附近的车辆，团购软件可以根据当前的位置推荐附近的影院和美食，地图应用可以根据用户的位置快速规划到目的地...
开发者可以使用这个API获取用户的地理位置，用于提供相关服务，比如地图定位、天气预报等。 2. HTML5位置服务兼容性：并不是所有的浏览器都支持Geolocation API。本文的代码首先检查浏览器是否支持该API，如果支持...
Google Geolocation API 是一个服务，允许开发者获取设备的地理位置信息，通常用于移动应用和网页应用，以便提供基于位置的服务。 **描述解析：** 描述中的“地理定位”指的是通过技术手段确定设备在地球表面的...
JavaScript游戏通常利用HTML5 Canvas和WebGL等技术创建图形界面，结合Geolocation API，可以创建出类似“寻宝游戏”或地理挑战类的游戏，用户需要根据自己的实际位置去完成特定任务。 在文件列表中的"geolocation_...
- 这个API与HTML5中的`<video>`和`<audio>`元素配合使用，提供了更为简便的方式来播放多媒体内容。 ##### 4. 历史记录API - 它使开发者能够更精细地控制用户浏览历史，比如记录用户的导航动作、恢复之前的页面...
7. **Geolocation API**：获取用户的地理位置信息，常用于地图应用或个性化服务。 8. **WebSocket API**：用于创建持久性的客户端与服务器之间的连接，支持实时数据传输。 9. **拖放（Drag and Drop）API**：使...