该HTML地理位置API来定位用户的位置。
什么是W3C地理位置API?
W3C的地理位置API是万维网联盟(W3C)的努力,标准化的接口来检索客户端设备的地理位置信息。
它定义了一组对象,ECMAScript标准兼容的,即在客户端应用程序执行通过位置信息服务器,其是透明的应用程序编程接口(API)的咨询给客户端的设备的位置。
的位置信息的最常见的来源是IP地址,无线网络连接和蓝牙MAC地址,无线电频率识别(RFID),Wi-Fi连接位置,或设备的全球定位系统(GPS)和GSM / CDMA的小区ID。
该位置还附有取决于可用的最佳位置信息源在给定的精度。
部署在Web浏览器
网页可能会在Web浏览器中实现它直接使用地理位置API。 从历史上看,一些浏览器可能获得通过谷歌齿轮插件的支持,但是这是在2010年停产和服务器端API它取决于停止在2012年响应。
地理位置API非常适合的Web应用程序的移动设备,诸如个人数字助理(PDA)和智能电话。 在台式计算机上,W3C的地理位置API在Firefox的工作,因为3.5版本,谷歌Chrome,歌剧10.6,IE浏览器9.0和Safari 5在移动设备上,它适用于Android(2.0+固件)的iOS,Windows Phone的和Maemo。
适用于Android和Symbian的设备(S60代3 5)自2010年11月24日 - W3C的地理位置API也受到的Opera Mobile 10.1的支持。
谷歌齿轮为老年人和不符合标准的浏览器,包括Internet Explorer 7.0或更高版本的齿轮插件,和谷歌Chrome,其实现的齿轮本身提供地理位置支持。 它还支持为Android浏览器(预2.0版)和Opera Mobile的Windows Mobile的插件移动设备的地理位置。
然而,谷歌齿轮地理位置API与W3C地理位置API不兼容,并且不再支持。
特征
W3C地理位置API的结果通常会给4点位置的性质,包括纬度和经度(坐标),高度(高度),和[位置的精度聚集],而这一切取决于位置信息源。
在某些查询,高度可能会产生或没有返回值。
找到用户的位置
该HTML地理位置API来获取用户的地理位置。
由于这会危及隐私,除非用户同意它的位置是不可用的。
浏览器支持
在表中的数字规定,完全支持地理位置第一个浏览器版本。
API | |||||
---|---|---|---|---|---|
Geolocation | 5 | 9 | 3.5 | 5 | 16.0 |
Note:地理位置更为精确与GPS设备,如iPhone 。
使用HTML地理位置
该getCurrentPosition()方法来获取用户的位置。
下面的示例返回用户的位置的纬度和经度:
例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
试一试» 为例进行了说明:
- 检查是否支持地理位置
- 如果支持,运行getCurrentPosition()方法。 如果没有,则显示一条消息向用户
- 如果getCurrentPosition()方法是成功的,它返回一个坐标反对在参数中指定的功能(showPosition)
- 所述showPosition()函数输出纬度和经度
上面的例子是一个非常基本的地理位置脚本,没有错误处理。
处理错误和拒绝
所述的第二个参数getCurrentPosition()方法用于处理错误。 它指定一个函数,如果它无法获取用户的位置运行:
例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
试一试» 显示结果在地图
要在地图上显示结果,你需要访问地图服务,如谷歌地图。
在下面的例子中,返回的纬度和经度是用来显示在谷歌地图的位置(using a static image) :
例
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
试一试» 谷歌地图脚本
如何显示一个互动的谷歌地图有一个标记,缩放和拖拽选项。
特定位置的信息
此页面演示了如何显示,用户在地图上的位置。
地理位置也是特定位置的信息,如非常有用:
- 截至到最新的本地信息
- 显示点的感兴趣的用户附近
- 逐向道路导航(GPS)
该getCurrentPosition()方法-返回数据
的getCurrentPosition()如果它是成功方法返回一个对象。 纬度,经度和准确性属性始终返回。 如果有其他属性被返回:
属性 | 返回 |
---|---|
coords.latitude | 纬度为十进制数 |
coords.longitude | 经度为十进制数 |
coords.accuracy | 位置精度 |
coords.altitude | 在米的海拔高度平均海平面以上 |
coords.altitudeAccuracy | 位置的高度准确性 |
coords.heading | 作为前进的度数从北顺时针 |
coords.speed | 以每秒米的速度 |
timestamp | 响应的日期/时间 |
Geolocation对象 - 其他有趣的方法
watchPosition() -返回用户的当前位置,并继续返回更新的位置随着用户移动(like the GPS in a car) 。
clearWatch() -停止watchPosition()方法。
下面的例子示出了watchPosition()方法。 您需要一种精确的GPS设备来测试这个(like iPhone )
例
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
试一试»