代码改变世界

HTML5开发 地理位置定位

2012-08-23 22:17  BytesLoop  阅读(2291)  评论(5)  编辑  收藏  举报

地理位置定位原理与介绍

地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA

地理位置获取流程：

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

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

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

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

HTML5地理地位的实现：

1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术

2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 )

3. 持续追踪用户的地理位置

4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。

HTML5中地理位置定位的方法

关于 Geolocation 对象

Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。

先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+

if(navigtor.geolocation){
          alert('你的浏览器支持 geolocation');
}else{
          alert('你的浏览器不支持 geolocation');
}

Geolocation API存在于navigator对象中，只包含3个方法：

1、getCurrentPosition  //获取当前位置,只获取一次

2、watchPosition           //监视位置改变,只要位置改变就获取,可实现地图导航

3、clearWatch                //清除位置监视,与watchPosition配对使用

 

getCurrentPosition(success,error,option)方法最多可以有三个参数：

第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；

coords.latitude ，纬度

coords.longitude ，经度

accuracy 准确角

altitude 海拔高度

altitudeAcuracy 海拔高度的精确度

heading 行进方向

speed 地面的速度

以下三个值只有Opera浏览器能获取到

p.address.country   (国家)

p.address. region      (省份)

p.address.city             (城市)

第二个参数用于捕获获取位置信息出错的情况；

TIMEOUT ，连接超时。

PERMISSION_DENIED ，您拒绝了使用位置共享服务，查询已取消。

POSITION_UNAVAILABLE ，暂时无法为您所在的星球提供位置服务。

第三个参数是配置项,它是一个对象，该对象影响了获取位置时的一些细节。

enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。

timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。  这样我们尝试修改调用 getCurrentPosition 时传递的参数

navigator.geolocation.getCurrentPosition( 
function(p) { 
     var map="维度"+p.coords.latitude+"经度"+p.coords.longitude;
     alert(var);
},
function(error){
switch(error.code){  
        case error.TIMEOUT :  
            alert( " 连接超时，请重试 " );  
            break;  
        case error.PERMISSION_DENIED :  
            alert( " 您拒绝了使用位置共享服务，查询已取消 " );  
            break;  
        case error.POSITION_UNAVAILABLE :   
            alert( " ，抱歉，暂时无法为您所在的星球提供位置服务 " );  
            break;  
    }  
},
option
);

watchPosition方法只针对移动设备

watchPosition像一个追踪器与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options); 
navigator.geolocation.clearWatch(watchPositionId );

HTML5地理定位(百度地图)  

百度地图API开发指南

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />	<!--使页面更好的在移动平台上展示-->
<title>HTML5开发 地理位置定位(百度地图与谷歌地图)</title>
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
</head>
<body>
<h1>爱玩 <a title="爱玩C" href="http://www.iwanc.com" target="_blank">http://www.iwanc.com</a></h1>
<p id="geo_loc"></p>
<div style="width:700px;height:550px;border:#ccc solid 1px;"id="dituContent"></div>
<script>
if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(p){
			document.getElementById('geo_loc').innerHTML="纬度"+p.coords.latitude+"经度"+p.coords.longitude;
			createMap(p.coords.latitude,p.coords.longitude);
		},
		function(err){
			document.getElementById('geo_loc').innerHTML=err.code+"\n"+err.message;
		}
		);
}else{
	document.getElementById('geo_loc').innerHTML="您的浏览器不支持地图定位";
}

function createMap(a,b){
	var map=new BMap.Map("dituContent");	        //创建地图实例
	var point=new BMap.Point(b,a);			//经度,纬度,定义一个中心点坐标
	map.centerAndZoom(point,15);			//初始化地图，设置中心点坐标和地图级别(值越大,地图越详细)
	map.enableScrollWheelZoom();			//启用地图滚轮放大缩小 
	window.map=map;					//将map变量存储在全局
}
</script>
</body>
</html>

　　

HTML5开发 地理位置定位(百度地图) Demo HTML5-Geolocation-baidu

 

HTML5地理定位(谷歌地图)

谷歌地图中文API文档

<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8">
<title>HTML5开发 地理位置定位(谷歌地图)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#info{
	width:400px;
	height:60px;
	border:1px solid;
}
#map{
	width:800px;
	height:600px;
	border:1px solid;
	margin-top:10px;
}
</style>
</head>
<body>
<h1>爱玩 <a title="爱玩C" href="http://www.iwanc.com" target="_blank">http://www.iwanc.com</a></h1>
	<input type="button" id="btn" value="获取位置">
	<div id="info" title="用户地理位置信息"></div>
	<div id="map" title="google 地图"></div>
	<script type="text/javascript">
	$(document).ready(
		function() {
			var btn = document.getElementById('btn');
			var info = document.getElementById('info');
			var map = document.getElementById('map');
			var geolocation;
			var gmap;
			var gmarker;
			$("#btn").click(
				function() {
					if (window.navigator.geolocation) {
						info.innerHTML = "请等待查询结果……";
						geolocation = window.navigator.geolocation;
						geolocation.getCurrentPosition(
						getPositionSuccess, getPositionError, {
							timeout : 5000
						});
					} else {
						info.innerHTML = "您的浏览器不支持地理位置定位";
					}
				});
				function getPositionError(error) {
					switch (error.code) {
					case error.TIMEOUT:
						info.innerHTML = "连接超时";
						break;
					case error.PERMISSION_DENIED:
						info.innerHTML = "无权使用地理位置共享服务";
						break;
					case error.POSITION_UNAVAILABLE:
						info.innerHTML = "无法提供位置服务";
						break;
					}
				}
				function getPositionSuccess(position) {
					var lat = position.coords.latitude;
					var lon = position.coords.longitude;
					geolocation.watchPosition(refreshPosition);
					var latLng = new google.maps.LatLng(lat, lon);
					var mapOptions = {
						zoom : 16,
						center : latLng,
						mapTypeId : google.maps.MapTypeId.ROADMAP
					};
					gmap = new google.maps.Map(map, mapOptions);
					gmarker = new google.maps.Marker({
						position : latLng,
						map : gmap
					});				
				}
				/*持续追踪地理位置*/
				function refreshPosition(position) {
					var lat = position.coords.latitude;
					var lon = position.coords.longitude;
					//将经纬度转换为地名
					getPlaceFromFlickr(lat, lon, 'output');
					var latLng = new google.maps.LatLng(lat, lon);
					//重设地图位置
					gmap.setSenter(latLng);
					//重设标记位置
					gmarker.setOptions({
						position : latLng
					});
				}
				//将经纬度转化为地名
			function getPlaceFromFlickr(lat, lon, callback) {
				info.innerHTML = "您所在的位置 经度：" + lat + ", 纬度：" + lon;
				var yql = 'select * from flickr.places where lat=' + lat
						+ ' and lon=' + lon;
				//将YQL网络服务器的api嵌入到网页，这是javascript库
				var url = 'http://query.yahooapis.com/v1/public/yql?q='
						+ encodeURIComponent(yql)
						+ '&format=json&diagnostics=' + 'false&callback='
						+ output;
				var script = document.createElement('script');
				script.setAttribute('src', url);
				document.getElementsByTagName('head')[0]
						.appendChild(script);
				}
			function output(o) {
				if (typeof (o.query.results.places.place) != 'undefined') {
					info.innerHTML += "<br/>"
							+ o.query.results.places.place.name;
				}
			}
});
</script>
</body>
</html>

　　

HTML5开发 地理位置定位(谷歌地图) Demo HTML5-Geolocation-google