HTML5 地理定位
- HTML5 Geolocation API（地理定位）用于获取用户的地理位置
- 鉴于该特性可能侵犯用户的隐私，除非获得用户同意，否则用户位置信息不可用
HTML5 地理定位简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 地理位置实例</title>
</head>
<body>
<p id="demo">
点击按钮获取您的地理位置（可能需要花费较长时间）：
</p>
<button onclick="getLocation()">
点我获取位置
</button>
<script type="text/javascript">
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>
实例解析：
- 首先检测是否支持地理定位 - if(navigator.geolocation)
- 如果支持，则运行 getCurrentPosition() 方法 - navigator.geolocation.getCurrentPosition(showPosition)
- 如果 getCurrentPosition() 运行成功，则向参数 showPosition 中规定的函数返回一个 coordinates 对象
- showPositon() 函数获得并显示经度和纬度
注：上述实例是一个非常基础的地理定位脚本，不含错误处理
HTML5 地理定位处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误，它规定当获取用户位置失败时运行的函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地理位置处理错误和拒绝</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,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_DENIDE:
x.innerHTML="用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVALABLE:
x.innerHTML="位置信息不可用。";
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误";
break;
}
}
</script>
</body>
</html>
错误代码：
- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时
HTML5 在地图中显示结果
脚本代码（使用Google地图静态图像）：
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 + "'>";
}
脚本代码（使用Google地图交互式地图）：
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
百度地图获取经纬度的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地图获取经纬度的例子</title>
<!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
<input type="button" onclick="getLocation()" value="确认" />
<div id="position"></div>
<script type="text/javascript">
var x = document.getElementById('position');
function getLocation() {
// 创建百度地理位置实例，代替 navigator.geolocation
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(e) {
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
} else {
x.innerHTML = 'failed' + this.getStatus();
}
});
}
</script>
</body>
</html>
getCurrentPosition() 方法 - 返回数据
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以“米”计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以“度”计 |
| coords.speed | 速度，以“米/秒”计 |
| timestamp | 响应的日期/时间 |