HTML5 Geolocation（地理定位）用于定位用戶的位置
定位用戶的位置
HTML5 Geolocation API 用于獲取用戶的地理位置
監(jiān)獄該特性可能侵犯用戶的隱私湖饱，除非用戶同意，否則用戶位置信息是不可用的
HTML5 使用地理位置
請使用getCurrentPositon()方法獲取用戶的位置
下面例子是一個(gè)簡單的地理定位實(shí)例杀捻，可返回用戶位置的經(jīng)度和緯度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲染帷）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"
經(jīng)度: " + position.coords.longitude;
}
</script>
</body>
</html>
實(shí)例解析：
1.檢測是否支持地理定位
2.如果支持致讥，則運(yùn)行g(shù)etCurrentPosition() 方法仅仆，如果不支持，則向用戶顯示一段消息
3.如果getCurrentPosition() 運(yùn)行成功垢袱，則向參數(shù)showPosition中對頂?shù)暮瘮?shù)返回一個(gè)coordinates對象
4.showPosition()函數(shù)獲得并顯示經(jīng)度和緯度
處理錯(cuò)誤和拒絕時(shí)的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲饶拱荨）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="該瀏覽器不支持定位。";
}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"
經(jīng)度: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用戶拒絕對獲取地理位置的請求请契。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的咳榜。"
break;
case error.TIMEOUT:
x.innerHTML="請求用戶地理位置超時(shí)。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤爽锥。"
break;
}
}
</script>
</body>
</html>
錯(cuò)誤代碼：
1.Permission denied 用戶不允許地理定位
2.Position unavailable 無法獲取當(dāng)前為孩子
3.Timeout 操作超時(shí)
在地圖上顯示結(jié)果
如需在地圖中顯示結(jié)果涌韩，您需要訪問可使用經(jīng)緯度的地圖服務(wù)，比如谷歌地圖或百度地圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲嚷纫摹）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置臣樱。";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用戶拒絕對獲取地理位置的請求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請求用戶地理位置超時(shí)雇毫。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤玄捕。"
break;
}
}
</script>
</body>
</html>
在上例中，我們使用返回的經(jīng)緯度數(shù)據(jù)在谷歌地圖中顯示位置（使用靜態(tài)圖像）
谷歌地圖腳本如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲扰锓拧）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置枚粘。";
}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用戶拒絕對獲取地理位置的請求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的席吴。"
break;
case error.TIMEOUT:
x.innerHTML="請求用戶地理位置超時(shí)赌结。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤捞蛋。"
break;
}
}
</script>
</body>
</html>
上面的鏈接延時(shí)圖和使用腳本來顯示帶有標(biāo)記孝冒，縮放和拖拽選項(xiàng)的交互式地圖
給定位置的信息
演示如何在地圖上顯示用戶的位置，不過拟杉，地理定位對于給定位置的信息同樣很有用處
1.更新本地信息
2.顯示用戶周圍的興趣點(diǎn)
3.交互式車載導(dǎo)航系統(tǒng)(GPS)
getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)
T若成功庄涡，則 getCurrentPosition() 方法返回對象。始終會返回 latitude搬设、longitude 以及 accuracy 屬性穴店。如果可用，則會返回其他下面的屬性拿穴。
屬性 描述
coords.latitude 十進(jìn)制數(shù)的緯度
coords.longitude 十進(jìn)制數(shù)的經(jīng)度
coords.accuracy 位置精度
coords.altitude 海拔泣洞，海平面以上以米計(jì)
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，從正北開始以度計(jì)
coords.speed 速度默色，以米/每秒計(jì)
timestamp 響應(yīng)的日期/時(shí)間
Geolocation 對象 - 其他有趣的方法
watchPosition() -返回用戶的當(dāng)前位置球凰，并繼續(xù)返回用戶移動時(shí)的更新位置
clearWatch() -停止watchPosition()方法
下例展示watchPosition()方法，需要一臺精確的GPS設(shè)備來測試該例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時(shí)間獲韧仍住）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置呕诉。";
}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"
經(jīng)度: " + position.coords.longitude;
}
</script>
</body>
</html>
