HTML5 Geolocation（地理定位）

HTML5 Geolocation API用于获得用户的地理位置。

注意：鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，在使用该功能的时候浏览器会弹出提醒框。

一、地理定位的几种方式

IP地址、GPS、Wifi、GSM/CDMA

二、地理位置获取流程

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

三、浏览器的支持

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+ 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone（IPhone3.0+、Android2.0+），地理定位更加精确。

四、HTML5中地理位置定位的方法

GeolocationAPI存在于navigator对象中，只包含3个方法：

1、getCurrentPosition //当前位置

2、watchPosition //监视位置

3、clearWatch //清除监视

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

实例解析:

检测是否支持地理定位

如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。

如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象

showPosition() 函数获得并显示经度和纬度

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

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;
    }
}

getCurrentPosition()方法 — 返回数据

若获取位置成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性描述

coords.latitude 十进制数的纬度

coords.longitude 十进制数的经度

coords.accuracy 位置精度

coords.altitude 海拔，海平面以上以米计

coords.altitudeAccuracy 位置的海拔精度

coords.heading 方向，从正北开始以度计

coords.speed 速度，以米/每秒计

timestamp 响应的日期/时间

还可以获得地理位置（只有firefox支持)

p.address.country 国家

p.address.region 省份

p.address.city 城市

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>基于浏览器的HTML5查找地理位置</title>  <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){ //返回用户位置 //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; //使用百度地图API //创建地图实例 var map =new BMap.Map("container"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化，设置中心点坐标和地图级别 map.centerAndZoom(point,15); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); 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>

제출하다 코드 재설정

자동운전