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(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

随机推荐

Hadoop源码之Configuration
本文hadoop版本为最新版本2.6.Configuration做为Hadoop的一个基础功能承担着重要的责任,为Yarn.HSFS.MapReduce.NFS.调度器等提供参数的配置.配置文件的分布 ...
物理学家的LOGO
原文选自Inside the Perimeter 阿那克西曼德(c. 610-546 BCE) 古希腊人,被认为是史上第一位物理学家,是有记录的认为世界按一定规律运行的第一人,做科学实验第一人,发明了 ...
MySQL数据库服务器的架设
导读 MySQL数据库是Linux操作系统上用得最多的数据库系统,它可以非常方便的与其它服务器集成在一起,如Apache.Vsftpd.Postfix等.下面介绍RHEL 6平台MySQL数据库服务器 ...
Unity3D研究院之动态修改烘培贴图的大小&脚本烘培场景
Unity默认烘培场景以后每张烘培贴图的大小是1024.但是有可能你的场景比较简单,用1024会比较浪费.如下图所示,这是我的一个场景的烘培贴图,右上角一大部分完全是没有用到,但是它却占着空间. 有 ...
[OpenJudge 3061]Flip The Card
[OpenJudge 3061]Flip The Card 试题描述 There are N× Ncards, which form an N× Nmatrix. The cards can be p ...
Linux tar命令exclude选项排除指定文件或目录
在linux中可以用tar打包目录以方便传输or备份,我们先来看一个例子 test 文件夹有如下文件 [root@lee ~]# ll test 总用量 -rw-r--r--. root root 4 ...
Install ssdb-rocks on CentOS 6
Install ssdb-rocks on CentOS 6 C.C. 发表于 2014年08月10日 20:14 | Hits: 649 为了优化节操精选的弹幕系统,打算更换到Facebook的R ...
Java RMI 框架
RMI(即Remote Method Invoke 远程方法调用).在Java中,只要一个类extends了java.rmi.Remote接口,即可成为存在于服务器端的远程对象,供客户端访问并提供一定 ...
40.扑克牌的顺子[Continuous cards]
[题目] 从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的.2-10为数字本身,A为1,J为11,Q为12,K为13,而大小王可以看成任意数字. [分析] 这题目很有意思,是一个典型 ...
[转]C程序内存区域分配(5个段作用)
[转]C程序内存区域分配(5个段作用) 2012-08-10 14:45:32| 分类: C++基础|字号订阅参考:http://www.360doc.com/content/11/03 ...

HTML-Geolocation API

HTML-Geolocation API的更多相关文章

随机推荐

热门专题