主要流程:
- 检测是否支持地理定位
- 如果支持,则运行 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>
html5定位
原文地址:http://www.cnblogs.com/babetterdj/p/7787985.html