HTML5 地理位置情報
HTML5 地理位置情報
HTML5 地理位置情報は、ユーザーの位置を特定するために使用されます。
ユーザーの位置を特定する
HTML5 Geolocation API は、ユーザーの地理的位置を取得するために使用されます。
この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は取得できません。
ブラウザのサポート
Internet Explorer 9 以降、Firefox、Chrome、Safari、Opera は地理位置情報をサポートします。
注: 地理位置情報 iPhone などの GPS を備えたデバイスの場合、地理位置情報はより正確です。
ブラウザがサポートしているかどうかを検出します:
if (navigator.geolocation) {
//console.log("瀏覽器支持!");
}else {
// console.log("瀏覽器不支持!");
}navigator.geolocationは、ブラウザに基づいて現(xiàn)在のユーザーの地理的位置を取得するために使用され、3つのメソッドを提供します:
void getCurrentPosition(onSuccess,onError,options);//獲取用戶當前位置 int watchCurrentPosition(onSuccess,onError,options);//持續(xù)獲取當前用戶位置 void clearWatch(watchId);//watchId 為watchCurrentPosition返回的值//取消監(jiān)控
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于瀏覽器的HTML5查找地理位置</title>
<!-- 百度API -->
<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
<script>
function getLocation(){
var options={
enableHighAccuracy:true,
maximumAge:1000
}
if(navigator.geolocation){
//瀏覽器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}else{
//瀏覽器不支持geolocation
}
}
//成功時
function onSuccess(position){
//返回用戶位置
//經(jīng)度
var longitude =position.coords.longitude;
//緯度
var latitude = position.coords.latitude;
//使用百度地圖API
//創(chuàng)建地圖實例
var map =new BMap.Map("container");
//創(chuàng)建一個坐標
var point =new BMap.Point(longitude,latitude);
//地圖初始化，設(shè)置中心點坐標和地圖級別
map.centerAndZoom(point,15);
}
//失敗時
function onError(error){
switch(error.code){
case 1:
alert("位置服務(wù)被拒絕");
break;
case 2:
alert("暫時獲取不到位置信息");
break;
case 3:
alert("獲取信息超時");
break;
case 4:
alert("未知錯誤");
break;
}
}
window.onload=getLocation;
</script>
</head>
<body
<div id="container" style="width:600px;height:600px"></div>
</body>
</html>エラーと拒否の処理
getCurrentPosition()メソッドの 2 番目のパラメーターは、エラーを処理するために使用されます。ユーザーの位置情報の取得が失敗したときに実行される関數(shù)を指定します:
Instance
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="請求用戶地理位置超時。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知錯誤。"
break;
}
}
