html5定位

主要流程：

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，利用它得到的经纬度，结合百度地图api显示

返回属性为：

coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

 

代码如下：

<!DOCTYPE html>
<!--programmer:adj-->
<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=你的秘钥"></script>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>    
<script type="text/javascript">
    //因手机号无法验证谷歌账号无法申请秘钥，故采用百度地图API
    var map = new BMap.Map("allmap");//显示地图
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
    map.enableScrollWheelZoom(true);
    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 longitude =position.coords.longitude;
        var latitude = position.coords.latitude;
        if(longitude!= "" && latitude!= ""){
            map.clearOverlays(); 
            var point = new BMap.Point(longitude,latitude);
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(point);
            convertor.translate(pointArr, 1, 5,translateCallback);
        }
    }
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        map.addOverlay(marker);
        var label = new BMap.Label("你在这儿！",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        map.setCenter(data.points[0]);
      }
    }
</script>

 

posted @ 2017-11-05 17:37  Babetterdj  阅读(217)  评论(0)  编辑  收藏  举报