地理位置定位原理与介绍
地理位置定位的几种方式：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地理定位(百度地图)
<!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="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地理定位(谷歌地图)
<!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{
400px;
height:60px;
border:1px solid;
}
#map{
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
