HTML5之地理位置

1、ip地址

书上说不准确,很多时候获取的是ISP机房的位置,但是获取非常方便,没有什么限制。但是实际上我觉得在中国,ip地址还是比较准确的,基本上上能精确到小区或大楼的标准。

2、GPS

非常准确,但是需要在户外,且需要很长时间搜索卫星。最主要的很多设备比如笔记本电脑基本都是不带GPS的,新的智能手机purse hanger倒是都有。

3、WiFi基站的mac地址。

(猜测是连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位)

这种定位的精度还是很不错的,而且还可以在室内定位。不过由于这种位置公开的wifi比较少,此种方法的适用范围比较少。

4、 GSM或CDMA基站

通过基站定位,精度随基站密度变化,精度一般,还是只有手机能用。看来地理位置API还是手机上比较有实用性。

5、用户指定位置

晕,这个就不是HTML5的范畴了。

地理位置获取流程:

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。

3、假设用户允许,浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。

检测浏览器支持:

JavaScript Code复制内容到剪贴板

  1. function loadDemo() {
  2. if(navigator.geolocation) {
  3. document.getElementById(“support”).innerHTML = “HTML5 Geolocation supported.”;
  4. } else {
  5. document.getElementById(“support”).innerHTML = “HTML5 Geolocation is not supported in
  6. your browser.”;
  7. }
  8. }

位置请求方式:

单次请求

JavaScript Code复制内容到剪贴板

  1. navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);

回调函数updateLocation接受一个对象参数,表示当前的地理位置,它有如下属性:

latitude——纬度
longitude——精度
accuracy——精确度,单位米
altitude——高度,单位米
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度
speed——运动的速度(假设你在地平线上运动),单位米/秒

回调函数handleLocationError接受错误对象,error.code是如下错误号。

UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。

第三个参数options是可选参数,属性如下:

enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。

参数使用的例子如下:wedding veil

JavaScript Code复制内容到剪贴板

  1. navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,
  2. {timeout:10000});

重复请求

navigator.geolocation.watchPosition(updateLocation, handleLocationError);
使用 watchPosition可以持续获取地理位置,浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个
watchID,使用navigator.geolocation.clearWatch(watchId)可以清除此次回调,使用不带参数的
navigator.geolocation.clearWatch()清除说有watchPosition。

地址转换:

由于地理位置API返回的是经纬度,如果要计算两个位置之间的距离,可以使用著名的Haversine公式计算两个坐标在地平线上的距离。

Listing 4-7. A JavaScript Haversine implementation

JavaScript Code复制内容到剪贴板

  1. function toRadians(degree) {
  2. return degree * Math.PI / 180;
  3. }
  4. function distance(latitude1, longitude1, latitude2, longitude2) {
  5. // R is the radius of the earth in kilometers
  6. var R = 6371;
  7. var deltaLatitude = toRadians(latitude2-latitude1);
  8. var deltaLongitude = toRadians(longitude2-longitude1);
  9. latitude1 =toRadians(latitude1);
  10. latitude2 =toRadians(latitude2);
  11. var a = Math.sin(deltaLatitude/2) *
  12. Math.sin(deltaLatitude/2) +
  13. Math.cos(latitude1) *
  14. Math.cos(latitude2) *
  15. Math.sin(deltaLongitude/2) *
  16. Math.sin(deltaLongitude/2);
  17. var c = 2 * Math.atan2(Math.sqrt(a),
  18. Math.sqrt(1-a));
  19. var d = R * c;
  20. return d;
  21. }
时间: 2024-08-06 07:54:15

HTML5之地理位置的相关文章

HTML5获取地理位置

HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Internet Explorer 9.0+ 手机支持情况: Android 2.0+iPhone 3.0+Opera Mobile 10.1+Symbian (S60 3rd & 5th generation)Blackberry OS 6Maemo 检测浏览器是否支持: if (navigator.geol

html5的地理位置定位

html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是window.navigator下面的一个对象,该对象提供了实现地理位置定位的接口.要用该功能需先判断浏览器是否支持navigator.geolocation对象. navigator.geolocation.getCurrentPosition(success, error, options); su

html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位:为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象中的geolocation属性有三个方法如下: 第一个方法是:getCurrentPosition 该方法来取得

HTML5获取地理位置定位信息

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地图接口来获取用户准确的地理位置信息. 如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息.注意这个

html5 Geolocation(地理位置定位)学习

1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供给浏览器.位置信息一般包括经度和纬度信息! 经度和纬度坐标信息一般由两种方式表示 a.十进制表示:39.17222 b.DMS角度格式表示:39°10'20" 2.位置从哪里来 html5 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户,相反,它只是用于检索位置信息的A

HTML5 获取地理位置信息

Geolocation API的基本知识 在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象的geolocation属性存在三个方法. 取得当前地理位置 可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下: Js代码 收藏代码 void getCurrentPosition(onSuccess, onError,

HTML5获取地理位置信息

<!DOCTYPE html> <html> <head> <title>Location</title> <meta charset="utf-8"> </head> <body> <input type="button" id="btnLocation" value="获取位置信息"> </body> &

利用html5 共享地理位置

该例子是演示利用HTML5实现地理定位.也就是获得本机IP地址,然后判断出所在位置,并且显示在Google地图上.. 实例效果图 该实例预览地址:http://html5demos.com/geo XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

html5获取地理位置和定位

1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意 function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert("浏览器不支持地理定位."); } } 2.showPosition()获取用户经度纬度 function sh