地理位置定位原理與介紹
地理位置定位的幾種方式：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="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地理定位(谷歌地圖)
<!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