HTML5 Geolocation 地理定位
html5 Geolocation(地理定位)用于定位的位置
定位的位置
html5 Geolocation API 用于获得的地理位置
鉴于该特性可能侵犯的隐私,除非同意,否则位置信息是不可用的
浏览器
Internet Explorer 9+,Firefox,Chrome,Safari 和 Opera Geolocation(地理定位).
使用地理定位
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.UNKN_ERROR: x.innerHTML="未知。" break; } }
在地图中结果
如需在地图中结果,需要访问可使用经纬度的地图服务,比如谷歌地图或地图
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
如果可用,则会返回下面的
Geolocation 对象 - 其它有趣的
下面的范例演示仪了 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; }