主要流程：
- 检测是否支持地理定位
- 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
- 如果getCurrentPosition()运行成功，利用它得到的经纬度，结合百度地图api显示
返回属性为：
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
粗浅代码如下：
（未转换为百度地图使用的坐标所以精度不是很好）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<title>基于html5的定位demo</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MRLGAx0pQMKPSxn2Yx1vIc7Xrd6Xfeo2"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//因手机号无法验证谷歌账号无法申请秘钥，故采用百度地图API
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(Success,Error,{
// 指示浏览器获取高精度的位置，默认为false
enableHighAccuracy: true,
// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
timeout: 5000,
// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
maximumAge: 3000
});
}else{
alert("Your browser does not support Geolocation!");
}
function Error(error){
//break;
console.error(error);
var msg=‘‘;
switch (error.code) {
case error.PERMISSION_DENIED:
msg = "用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
msg = "位置信息是不可用的。"
break;
case error.TIMEOUT:
msg = "请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
msg = "未知错误。"
break;
}
document.write(msg);
}
function Success(position){
var map = new BMap.Map("allmap");//显示地图
map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
map.enableScrollWheelZoom(true);
//获取当前位置经纬度
var longitude =position.coords.longitude;
var latitude = position.coords.latitude;
if(longitude!= "" && latitude!= ""){
map.clearOverlays();
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
</script>
时间： 2024-11-13 01:33:15