下面的例子展示了如何在在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 API获取当前位置信息
在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地...
Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息(坐标),本篇文章主要介绍了三个方法,非常具有实用价值,需要的朋友可以参考下
Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5...
HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...
1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。 语法: navigator.geolocation.getCurrentPosition(success, error, options) 参数: success: 成功得到位置信息时的回调函数,使用...
查找最近的 Marketo-Office 此示例获取用户的位置,并返回最近的 Marketo 办公室位置及其电话号码。 如果无法访问用户的位置,则脚本默认为 Marketo 的... 该示例使用和 HTML5 Geolocation API。 讨论了更多实施细节。
HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API [removed] if(navigator.geolocation){ alert('浏览器...
从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用, 辅以直观明了的客户端和服务器端示例代码,让...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
要获取IP地址位置,您将使用的 。 要生成地图,我们建议使用 。 您可以使用任何喜欢的工具来帮助您完成挑战。 因此,如果您有想要练习的东西,请随时尝试。 您的用户应该能够: 查看每个页面的最佳布局,具体取决于...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造,为读者清晰解读了HTML5规范的缘由、发展和现状,全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性...