HTML5 ????
HTML5 Geolocation
HTML5 Geolocation? ???? ??? ???? ? ?????.
??? ?? ??
HTML5 Geolocation API? ???? ??? ??? ?? ? ?????.
? ??? ???? ????? ??? ? ????, ???? ?? ??? ???? ????? ??? ? ????.
???? ??
Internet Explorer 9+, Firefox, Chrome, Safari ? Opera? ????? ?????.
??: ????? iPhone? ?? GPS? ?? ????? ??? ? ????. ? ?????.
HTML5 - ??? ?? ??
??? ??? ????? getCurrentPosition() ???? ?????.
?? ?? ??? ??? ??? ??? ???? ??? ??? ?? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/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 +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
</body>
</html>????? ???? ??? ???
?? ? :
???? ?? ?? ??
???? ?? getCurrentPosition() ???? ?????. ???? ?? ?? ????? ???? ?????.
getCurrentPosition()? ????? ???? showPosition ????? ??? ??? ?? ??? ?????.
showPosition() ??? ??? ??? ??? ?????.
?? ? ?? ??? ?? ?? ???? ?? ?? ???????.
?? ? ?? ??
getCurrentPosition() ???? ? ?? ????? ??? ???? ? ?????. ??? ?? ?? ?? ? ??? ??? ?????:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/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="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經(jīng)度: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤。"
break;
}
}
</script>
</body>
</html>????? ???? ?? ??
?? ??:
?? ??? - ???? ??? ??? ???? ??
??? ??? ? ?? - ?? ??? ??? ? ??
?? ?? - ?? ?? ??
?? ??? ??
??? ??? ????? Google Maps ?? Baidu Maps? ?? ??? ??? ??? ? ?? ?? ???? ????? ???.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/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="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤。"
break;
}
}
</script>
</body>
</html>????? ???? ??? ???
?? ???? ??? ?? ? ?? ???? ???? Google ??? ??? ?????(?? ??? ??).
?
Google ?? ????? ???? ??, ??/?? ? ??? ??? ??? ??? ??? ???? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/p>
<button onclick="getLocation()">點(diǎn)我</button>
<div id="mapholder"></div>
<script src="http://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="用戶拒絕對(duì)獲取地理位置的請(qǐng)求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="請(qǐng)求用戶地理位置超時(shí)。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯(cuò)誤。"
break;
}
}
</script>
</body>
</html>????? ???? ??? ???
?? ??
? ???? ??? ???? ??? ?????? ??? ?????. ??? ??? ??? ?? ??? ?? ??? ?? ??? ?????.
?:
?? ?? ????
??? ?? ?? ?? ??
-
??? ?? ????? ???(GPS)
getCurrentPosition() ??? - ??? ??
???? getCurrentPosition() ???? ??? ?????. ??, ?? ? ??? ??? ?? ?????. ?? ??? ?? ?? ?? ??? ?????.
| < td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"> ???||||||||||
| coords.latitude | coords.longitude | ??? ?? | ||||||||
| ?? . ??? | ?? ??? | < / tr>|||||||||
| coords.altitude | < td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">??(?? ?? ??)< /tr >
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，從正北開(kāi)始以度計(jì) |
| coords.speed | 速度，以米/每秒計(jì) |
| timestamp | 響應(yīng)的日期/時(shí)間 |
Geolocation ??
watchPosition() - ???? ?? ??? ???? ???? ??? ? ????? ??? ?? ?????( ?, ???? GPS? ????).
clearWatch() - watchPosition() ???? ?????.
?? ???? watchPosition() ???? ?????. ? ?? ?????? ??? GPS ??(?: iPhone)? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲?。?lt;/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 +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
</body>
</html>
