HTML-Geolocation API

获取位置信息：

请求一个位置信息，如果用户同意，浏览器就会返回位置信息(由经纬度和其他元数据组成)，该信息是通过支持html5地理定位功能的底层设备提供给浏览器的；该API不指定设备用哪种底层技术来定位，所以，返回的元数据不确定；同时不能保证设备返回的实际位置是精确的；
数据源：
- IP地址地理定位：自动查找ip地址，然后检索其注册的物理地址；//许多网站会根据ip地址的信息来做广告；
  - 优点：任何地方都可以在服务器端处理；
  - 缺点：不精确，一般精确到城市级；运算代价大；
- GPS地理定位：通过搜集运行在地球周围的多个gps卫星的信号实现的；
  - 优点：很精确
  - 缺点：定位时间长，室内效果不好，需要额外硬件设备；
- wifi地理定位：通过三角距离计算(用户当前位置到已知的多个wifi接入点的距离)得出的；
  - 优点：精确，可以在室内使用；可以简单，快捷定位；
  - 缺点：在乡村这些无线接入点较少的地区效果不好；
- 手机地理定位：通通过用户到一些基站的三角距离确定；
  - 优点：相当准确，可以在室内使用，可以简单，快捷定位；
  - 缺点：需要能够访问手机或其他moden的设备；
- 用户自定义地理定位：通过编程计算出用户的位置或用户自定义位置
  - 优点：用户可以获得比程序定位服务更精确的位置数据；允许地理定位服务的结果作为备用位置信息；
  - 缺点：可能不准确，特别是当用户位置变更后；

隐私机制：

用户从浏览器中打开位置感知应用程序；
应用程序web页面加载，然后通过Geolocation函数调用请求位置坐标；浏览器拦截这一请求，然后请求用户授权；
用户同意后，浏览器从其宿主设备中检索坐标信息；
浏览器将坐标发送给受信任的外部定位服务，它返回一个详细信息，并将位置信息发回给html5 geolocation应用程序；

使用API:

浏览器支持性检查：通过navigator.geolocation

位置请求：

单次定位请求: 核心函数，navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);

updateLocation:只要浏览器具备访问位置信息的条件，就会调用此函数；该函数接受一个位置对象参数，包括坐标(coords)和一个时间戳；
handleLocationError:处理错误信息，会返回一个描述错误的对象包括错误编码与描述
- 1:用户选择拒绝；
- 2:尝试获取用户信息，但失败来；
- 3:设置了可选timeout值后超时

可选的请求特性：

enableHeightAccuracy:启用该参数即通知浏览器启用HTML5 Geolocation服务的高度精确模式；注意启用后可能没有差别，也可能导致更多的时间计算；
timeout:单位ms，告诉浏览器计算当前位置允许的最长时间，默认为infinity;

maxmumAge:单位ms,表示浏览器重新计算位置的时间间隔，默认为0；

               function loadDemo() {

			if(navigator.geolocation) {

				document.getElementById('support').innerHTML = 'Geolocation supported';

			} else {

				document.getElementById('support').innerHTML = 'Geolocation is not supported in your browser';

			}

		}

		function updateLocation(position) {

			var latitude = position.coords.latitude; //经度

			var longitude = position.coords.longitude; //纬度

			var accuracy = position.coords.accuracy; //准确度

			var timestamp = position.timestamp;  //时间戳

			document.getElementById('latitude').innerHTML = latitude;

			document.getElementById('longitude').innerHTML = longitude;

			document.getElementById('accuracy').innerHTML = accuracy;

			document.getElementById('timestamp').innerHTML = timestamp;

		}

		function handleLocationError(error) {

			var msg = error.message;

			switch(error.code) {

				case 0:

				  updateErrorStatus('There was an error while retrieving your location.Additional details: ' + msg);

				  break;

				case 1:

				  updateErrorStatus('The user opted not to share his or her location');

				  break;

				case 2:

				  updateErrorStatus('The browser was unable to determine your location.Additional details: ' + msg);

				  break;

				case 3:

				  updateErrorStatus('The browser timed out before retrieving the location');

				  break;

			}

		}

		function updateErrorStatus(msg) {

			console.log(msg);

			document.getElementById('msg').innerHTML = msg;

		}

		window.onload = loadDemo;

		var btn = document.getElementById('btn');

		btn.onclick = function () {

			navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {timeout: 100000});

		}

- 重复性的位置更新请求：核心函数，navigator.geolocation.watchPosition(updateLocation, handleLocationError);
  - 只要用户位置发生变化就会调用updateLocation；
  - 停止监听：
```
var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);

navigator.geolocation.clearWatch(watchId);　　
```

构建应用：(距离跟踪器):　　

<body onload='loadDemo()'>

  <header>

  	<h1>Odometer Demo</h1>

    <h4>Live Race Data!</h4>

  </header>

  <div id='container'>

  <section>

  	<article>

  		<header>

  			<h1>Your Location</h1>

  		</header>

  		<div class='info' id='status'>Geolocation is not supported in your browser</div>

  		<div class='geostatus'>

  			<p id='latitude'>Latitude: </p>

        <p id='longitude'>Longitude: </p>

  			<p id='accuracy'>Accuracy: </p>

  			<p id='timestamp'>Timestamp: </p>

  			<p id='currDist'>Current distance traveled: </p>

  			<p id='totalDist'>Total distance traveled: </p>

  		</div>

  	</article>

  </section>

  <footer>

  	<h2>Powered by HTML5, and your feet!</h2>

  </footer>

  </div>

  <script type="text/javascript">

  	var totalDistance = 0.0;

    var lastLat;

    var lastLong;

    Number.prototype.toRadians = function() {

      return this * Math.PI / 180;

    }

    function distance(latitude1, longitude1, latitude2, longitude2) {

      //r是地球半径，单位km；

      var R = 6371;

      var deltaLatitude = (latitude2 - latitude1).toRadians();

      var deltaLongitude = (longitude2 - longitude1).toRadians();

      latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();

      var a = Math.sin(deltaLatitude/2) * Math.sin(deltaLatitude/2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude/2) * Math.sin(deltaLongitude/2);

      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

      var d = R * c;

      return d;

    }

    function updateErrorStatus(message) {

      document.getElementById('status').style.background = 'papayaWhip';

      document.getElementById('status').innerHTMl = '<strong>Error</strong>: ' + message;

    }

    function updateStatus(message) {

      document.getElementById('status').style.background = 'paleGreen';

      document.getElementById('status').innerHTMl = message;

    }

    function updateLocation(position) {

      var latitude = position.coords.latitude;

      var longitude = position.coords.longitude;

      var accuracy = position.coords.accuracy;

      var timestamp = position.timestamp;  

      document.getElementById('latitude').innerHTML = 'latitude: ' + latitude;

      document.getElementById('longitude').innerHTML = 'longitude: ' + longitude;

      document.getElementById('accuracy').innerHTML = 'accuracy: ' + accuracy;

      document.getElementById('timestamp').innerHTML = 'timestamp: ' + timestamp;

      //如果accuracy值太大，就不要计算距离

      if(accuracy >= 30000) {

        updateStatus('Need more accuracy values to calculate distance');

        return;

      }

      //计算距离

      if((lastLat != null) && (lastLong != null)) {

        var currentDistance = distance(latitude, longitude, lastLat, lastLong);

        alert(0);

        document.getElementById('currDist').innerHTMl = 'Current distance traveled: ' + currentDistance.toFixed(2); + ' km';

        totalDistance += currentDistance;

        document.getElementById('totalDist').innerHTMl = 'Total distance traveled: ' + currentDistance.toFixed(2) + ' km';

        updateStatus('Location successfully updated');

      }

      lastLat = latitude;

      lastLong = longitude;

    }

    function handleLocationError(error) {

      var msg = error.message;

      switch(error.code) {

        case 0:

          updateErrorStatus('There was an error while retrieving your location.Additional details: ' + msg);

          break;

        case 1:

          updateErrorStatus('The user opted not to share his or her location');

          break;

        case 2:

          updateErrorStatus('The browser was unable to determine your location.Additional details: ' + msg);

          break;

        case 3:

          updateErrorStatus('The browser timed out before retrieving the location');

          break;

      }

    }

    function loadDemo() {

      document.getElementById('status').innerHTMl = 'HTMl5 Geolocation is supported in your browser';

      navigator.geolocation.watchPosition(updateLocation, handleLocationError, {timeout: 10000});

    }

  </script>

</body>

结合GoogleMap使用：　　

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

	#map{

		width:500px;

		height: 400px;

	}

	</style>

</head>

<body>

<div id='map'></div>

<div id='status'></div>

<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>

<script type="text/javascript">

	function updateLocation(position) {

		var latitude = parseFloat(position.coords.latitude);

		var longitude = parseFloat(position.coords.longitude);

        var latlng = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {

                 zoom: 8,

                 center: latlng,

                 mapTypeId: google.maps.MapTypeId.ROADMAP

        };

        var map = new google.maps.Map(document.getElementById('map'),mapOptions);    

		map.setCenter(latlng);

		var marker = new google.maps.Marker({

            map: map,

            position: latlng,

        });

	}

	navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);

	function handleLocationError(error) {

      document.getElementById('status').innerHTMl = '<strong>Error</strong>: ' + error.message;

    }

</script>

</body>

</html>

HTML-Geolocation API的更多相关文章

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
Geolocation API JavaScript访问用户的当前位置信息
Geolocation API在浏览器中的实现是navigator.geolocation对象,常用的有以下方法. 1.第一个方法是getCurrentPosition() 调用这个方法就会触发请求用 ...
Geolocation API 原理及方法
使用IP地址:基于Web的数据库:无线网络连接定位:三角测量:GPS技术:来测量经度和纬度.(综合了所有技术)地理定位的精确度,有很多方法可以定位用户的地理位置,并且每种方法都有不同的精度.桌面浏览器 ...
html5 geolocation API
清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...
HTML5 Geolocation API工作原理[转载]
大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...
Geolocation API
Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框接收3个参数: 1.成功回调函数 ...
HTML5 Geolocation API地理定位整理（二）
Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...
HTML5 Geolocation API地理定位整理（一）
HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...
HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介一.总结一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

随机推荐

WebRequest中的工厂方法模式
hdu.5202.Rikka with string(贪心）
Rikka with string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
hibernate杂记
1.hibernate中get和load方法有什么不同? (1)执行get方法,会立即加载对象, 执行load方法,若不使用该对象,则不会立即执行查询操作. (2)load 方法可能会抛出 LazyI ...
MSSQL复习
1.用户角色: 登录名就相当于一个用户角色相当于把你的操作权限分组了 2.数据系统结构(略) 网络连接接口关系引擎存储引擎内存 3.数据库的结构数据库架构对象(在Sql server中将 ...
unity3d 加密资源并缓存加载
原地址:http://www.cnblogs.com/88999660/archive/2013/04/10/3011912.html 首先要鄙视下unity3d的文档编写人员极度不负责任,到发帖为止 ...
[BZOJ1067][SCOI2007]降雨量
[BZOJ1067][SCOI2007]降雨量试题描述我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意 Y<Z<X,Z年的降雨量严格 ...
linux expect 简单讲解
来自http://blog.csdn.net/winstary/archive/2009/08/08/4422156.aspx使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明, ...
ecshop的商品系统数据库整合
-- 表的结构 `ecs_shop_config` '全站配置信息表' 商店设置 `id` '全站配置信息自增id',`parent_id` '父节点id,取值于该表id字段的值',`co ...
cobbler部署机器的默认密码
修改cobbler的默认密码: 用 openssl 生成一串密码后加入到 cobbler 的配置文件(/etc/cobbler/settings)里,替换 default_password_crypt ...
局域网所有机器都能连接MySQL数据库的设置命令
Sql代码: grant all privileges on *.* to root@"%" identified by 'abc' with grant option; flus ...

HTML-Geolocation API

HTML-Geolocation API的更多相关文章

随机推荐

热门专题