HTML5 定位
HTML5定位用于定位用户的位置
确定用户的位置
HTML5定位API用于定位用户的位置.
因为这会泄露好的隐私，所以位置信息只有更好批准获取的情况下才能获取.
浏览器支持
IE9+, 火狐浏览器, 谷歌浏览器,苹果浏览器和欧鹏浏览器都支持定位.
注意: 地理定位可以使用更精确的GPS设备,像iPhone.
HTML5 - 使用定位
使用getCurrentPosition()方法获取用户的位置.
下面是个简单定位的例子The，返回用户的经纬度:
例子
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML = "Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML = "纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
亲自试一试 »
例子说明:
- 检查是否支持定位
- 如果支持,运行getCurrentPosition()方法. 如果不支持显示不支持信息
- 如果getCurrentPosition()方法执行 , 它会返回坐标对象，并且作为指定函数的参数( showPosition )
- showPosition()函数用于显示获取到的经度和纬度
以上例子是定位的基本脚本，没做任何错误处理.
错误处理和拒绝
getCurrentPosition()的第二个参数用于处理错误. 它是指如果获取用户位置失败后进行的处理:
例子
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
亲自试一试 »
错误代码:
- 拒绝访问 - 用户不允许定位
- 位置不可用 - 无法得到用户当前位置
- 超时 - 操作超时
在地图中显示结果
在地图中显示结果，你需要使用地图服务接口，比如谷歌地图:
例子
{
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+"'>";
}
亲自试一试 »
上面的例子我们根据返回的经纬度在谷歌地图上显示位置(使用的是静态图片).
Google地图脚本
展示如何使用脚本在地图上做标记、缩放、拖拽等.
位置-确切信息
这个页面演示了如何在地图上显示用户的位置. 然而,定位对特殊位置信息非常有用.
例子:
- 最新的本地信息
- 显示Points-of-interest附近的用户
- 道路导航系统 (GPS)
getCurrentPosition()方法- 返回数据
getCurrentPosition()方法返回一个对象. 经度和纬度总是精准的返回.下面的一些属性也会被返回.
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制纬度 |
| coords.longitude | 十进度经度 |
| coords.accuracy | 精准位置 |
| coords.altitude | 在高于平均海平面米海拔高度 |
| coords.altitudeAccuracy | 位置的精准定位 |
| coords.heading | 顺时针方向的标题 |
| coords.speed | 每秒的速度 |
| timestamp | 响应的日期/时间 |
定位对象 - 其它有趣的方法
watchPosition()方法 - 返回用户的当前位置并继续返回更新位置作为用户动作(如在车内的GPS).
clearWatch()方法 - 停止watchPosition()方法.
下面的例子展示了watchPosition()方法. 你需要一个精确的GPS装置来测试这个 (如 iPhone):
例子
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML = "Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
亲自试一试 »
