HTML5 Geolocation 地理定位

html5 Geolocation（地理定位）用于定位 用户 的位置

定位 用户 的位置

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

鉴于该特性可能侵犯 用户 的隐私，除非 用户 同意，否则 用户 位置信息是不可用的

浏览器 支持

Internet Explorer 9+,Firefox,Chrome,Safari 和 Opera 支持 Geolocation（地理定位）.

Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确

使用地理定位

HTML DOM?getCurrentPosition()? 方法 用来获得 用户 的位置

下面的范例演示了 一个 简单的的地理定位，返回 用户 位置的经度和纬度

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

?检测浏览器是否 支持 地理定位
?如果 支持 ，则运行 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.UNK Now N_ERROR:
????????????x.innerHTML="未知 错误 。"
????????????break;
????}
}

错误 代码 错误 代码 描述 Permission denied 用户 不允许地理定位 Position unavailable 无法 获取 当前位置 Timeout 操作超时

在地图中 显示 结果

如需在地图中 显示 结果，需要访问可使用经纬度的地图服务，比如谷歌地图或 百度 地图

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+"'>";
}

上面这个范例，我们我们使用返回的经纬度数据在谷歌地图中 显示 位置（使用静态图像）

这个范例演示了如何使用脚本来 显示 带有 标记 、缩放和拖曳选项的交互式地图

给定位置的信息

本节大部分的范例是如何在地图上 显示 用户 的位置

不过，地理定位对于给定位置的信息同样很有用处

范例

更新本地信息

显示 用户 周围的兴趣点

交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法 返回对象

始终会返回 latitude、longitude 以及 accuracy 属性

如果可用，则会返回下面的 属性

属性 描述 coords.latitude 十进制数的纬度 coords.longitude 十进制数的经度 coords.accuracy 位置精度 coords.altitude 海拔，海平面以上以米计 coords.altitudeAccuracy 位置的海拔精度 coords. heading 方向，从正北开始以度计 coords.speed 速度，以米/每秒计 timestamp 响应的日期/时间

Geolocation 对象 - 其它有趣的 方法 方法 描述 watchPosition() 返回 用户 的当前位置，并继续返回 用户 移动时的更新位置 clearWatch() 停止 watchPosition() 方法

下面的范例演示仪了 watchPosition() 方法 ，你需要一台精确的 GPS 设备来测试该范例

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>经度:?"?+?position.coords.longitude;?
}

HTML5 MathML 数学公式 ? ?HTML5 内联 SVG

查看更多关于HTML5 Geolocation 地理定位的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92362