码迷,mamicode.com
首页 > Web开发 > 详细

html5定位

时间:2017-11-05 17:57:23      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:git   指定   ack   back   translate   browser   position   bre   速度   

主要流程:

  • 检测是否支持地理定位
  • 如果支持,则运行 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定位

标签:git   指定   ack   back   translate   browser   position   bre   速度   

原文地址:http://www.cnblogs.com/babetterdj/p/7787985.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!