美文网首页H5程序员前端收藏
手机H5获取地理位置

手机H5获取地理位置

作者: IT锟 | 来源:发表于2017-10-24 10:07 被阅读853次

    手机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>
    
    

    [获取授权]

    相关文章

      网友评论

        本文标题:手机H5获取地理位置

        本文链接:https://www.haomeiwen.com/subject/bwktpxtx.html