H5程序员前端收藏

手机H5获取地理位置

2017-10-24  本文已影响853人  IT锟

手机H5想要获取地理位置需要的工具,或者API:

百度地址api

手机H5获取地理位置,直接上代码,


<!DOCTYPE html>
<html>
<head>
  <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  </style>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script>

  <title>地址解析</title>

</head>
<body>
  <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

if(navigator.geolocation){  
  navigator.geolocation.getCurrentPosition(  
      function(p){  
          var latitude=p.coords.latitude;//获取坐标点纬度  
          var longitude=p.coords.longitude;//获取坐标点经度  
          //以指定的经度与纬度创建一个坐标点  
          var po=new BMap.Point(longitude,latitude);  
          //创建一个地理解析器  
          var geocoder=new BMap.Geocoder();  
          //获取位置  
          geocoder.getLocation(po,function(rs){  
              //获取地理组件  
              var addComp=rs.addressComponents;  
              //获取省份  
              var province=addComp.province;  
              //获取城市  
              var city=addComp.city;  
              //获取区县  
              var district=addComp.district;  
              //获取街道  
              var street=addComp.street;  
              //获取街道号  
              var streetNumber=addComp.streetNumber; 

              alert(latitude);
              alert(longitude);
              alert(province+city+district+street+streetNumber);

          });  
      },function(e){  
          switch (e.code) {  
              case e.TIMEOUT:  
                  alert("定位失败,请求获取用户位置超时");  
                  break;  
              case e.PERMISSION_DENIED:  
                  alert("您拒绝了使用位置服务功能,查询已取消");  
                  break;  
              case e.POSITION_UNAVAILABLE:  
                  alert("抱歉,暂时无法为您所在的星球提供位置服务");  
                  break;  
              case e.UNKNOWN_ERROR:  
                  alert("发生一个位置错误");  
                  break;  
          }  
      },{  
          //指示浏览器获取高精度的位置,默认false  
          enableHighAcuracy: true,  
          //指定获取地理位置的超时时间,默认不限时,单位为毫秒  
          timeout:5000,  
          //最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置  
          maximumAge:2000  
      }  
  );  
}else{  
  alert("不支持");  
} 

</script>

[获取授权]

上一篇下一篇

猜你喜欢

热点阅读