html5 Geolocation API 用于获得用户的地理位置
鉴于该特性可能侵犯用户的隐私, 除非用户同意, 否则用户位置信息是不可用的
注意: 大部分浏览器都支持 Geolocation(地理定位), 对于拥有 GPS 的设备, 比如 iPhone, 地理定位更加精确
使用 HTML5 地理定位
请使用 getCurrentPosition() 方法来获得用户的位置
下例是一个简单的地理定位实例, 可返回用户位置的经度和纬度:
- <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>
实例解析:
检测是否支持地理定位
如果支持, 则运行 getCurrentPosition() 方法如果不支持, 则向用户显示一段消息
如果 getCurrentPosition() 运行成功, 则向参数 showPosition 中规定的函数返回一个 coordinates 对象
showPosition() 函数获得并显示经度和纬度
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误它规定当获取用户位置失败时运行的函数:
- <p id="demo"> 点击按钮获取您当前坐标 (可能需要比较长的时间获取):</p>
- <button onclick="getLocation()"> 点我 </button>
- <script>
- var x=document.getElementById("demo");
- function getLocation()
- {
- if (navigator.geolocation)
- {
- navigator.geolocation.getCurrentPosition(showPosition,showError);
- }
- else
- {
- x.innerHTML="该浏览器不支持定位";
- }
- }
- function showPosition(position)
- {
- x.innerHTML="纬度:" + position.coords.latitude +
- "<br > 经度:" + position.coords.longitude;
- }
- 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;
- }
- }
- </script>
Geolocation 对象
watchPosition() - 返回用户的当前位置, 并继续返回用户移动时的更新位置 (就像汽车上的 GPS)
clearWatch() - 停止 watchPosition() 方法
下面的例子展示 watchPosition() 方法您需要一台精确的 GPS 设备来测试该例 (比如 iPhone):
- <p id="demo"> 点击按钮获取您当前坐标 (可能需要比较长的时间获取):</p>
- <button onclick="getLocation()"> 点我 </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 > 经度:" + position.coords.longitude;
- }
- </script>
来源: http://www.bubuko.com/infodetail-2500385.html