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

随机推荐

使用python一步一步搭建微信公众平台（一）
使用的工具,python 新浪SAE平台,微信的公众平台你需要先在微信的公众平台与新浪SAE平台上各种注册,微信平台注册的时候需要你拍张手持身份证的照片,还有几天的审核期微信公众平台:http:/ ...
关于Eclipse部署openfire3.8.2源码的体会
因为公司要做人际银行的一个项目需要openfire(服务器)+asmack(客户端),所以需要对消息的推送及消息发送知识的积累.所以需要研究xmpp,以前不是很了解这个技术,现在需要学习.首先就得部署 ...
在Mysql中如何显示所有用户？
这是一个mysql初学者经常问到的一个问题,今天我们就带大家看看是如何在Mysql中显示所有用户的.通常我们在mysql中使用SHOW DATABASES可以显示所有的数据库,SHOW TABLES将 ...
[BZOJ3624][Apio2008]免费道路
[BZOJ3624][Apio2008]免费道路试题描述输入输出输入示例输出示例数据规模及约定见“输入”. 题解第一步,先尽量加入 c = 1 的边,若未形成一个连通块,则得到必须加入 ...
技术分享：WIFI钓鱼的入门姿势
简介该实验先是搭建一个测试环境,然后创建一个假的无线接入点,把网络连接连接到假的接入点并且强迫用户连接假的无线点. 事先准备 1.无线网卡:无线网卡用于数据包的嗅探和注入. 2. Backtrack ...
Linux rpm安装问题解决
1.安装时提示:warning: *.rpm: Header V3 RSA/SHA256 Signature, keykey ID c105b9de: NOKEY 解决的方法就是在rpm 语句后面加上 ...
每天一个脚本解析day1==》《service xxxxx status》之service脚本解析
vim /sbin/service #!/bin/sh . /etc/init.d/functions #读取环境变量. VERSION="$(basename $0) ver. 0. ...
C语言指针总结
C语言中的精华是什么,答曰指针,这也是C语言中唯一的难点. C是对底层操作非常方便的语言,而底层操作中用到最多的就是指针,以后从事嵌入式开发的朋友们,指针将陪伴我们终身. 本文将从八个常见的方面来透视 ...
当年的文曲星cc800
你还记得当年的cc800吗?还记得黄金英雄传说吗?还记得用cc800编程的日子吗... 今天突然想起了我的cc800,好怀念那段爬在家里的阳台的木架子上,挠着头,编程序的日子...可惜,当时比较穷,没 ...
AJAX,JSON用户名校验
效果开发结构 1,src部分有两个包dao和servlet 1.1dao包下有两个数据库工具类文件 SqlHelper.java package org.guangsoft.dao; import ...

HTML-Geolocation API

HTML-Geolocation API的更多相关文章

随机推荐

热门专题