h5实现浏览器的定位功能 获取经纬度【亲测有效】2018年5月11日 附带百度坐标转换为腾讯坐标 查位置 逆向查

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013408059/article/details/80278061

最近写h5用到了定位功能,网上搜索如果使用其他API的话还需要下载sdk,所以就使用的浏览器的,比较简陋。不过定位也还ok,微信自带浏览器偏差了大概500米, UC的大概也就是几米吧,比较精确了。

js代码:

// 判断是否支持获取经纬度
 
// 获取本机经纬度
getlatandlong=()=> {alert('经度:'+this._position.lat,'维度:'+this._position)}

 getLocation=()=>{
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(this.showPosition,this.showError);
  }else{
    alert("浏览器不支持地理定位");
  }
   //调用coords的latitude和longitude即可获取到用户的纬度和经度。

};

接下来是两个回调函数 调用成功,和调用失败的函数

 

showPosition=(position)=>{
  var lat = position.coords.latitude; //纬度
  var lag = position.coords.longitude; //经度
  this._position.lon=lag;
  this._position.lat = lat;
  console.log('纬度:'+lat+',经度:'+lag);
};
// 上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
// 我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:
showError=(error)=>{
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("定位失败,用户拒绝请求地理定位");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("定位失败,位置信息是不可用");
      break;
    case error.TIMEOUT:
      alert("定位失败,请求获取用户位置超时");
      break;
    case error.UNKNOWN_ERROR:
      alert("定位失败,定位系统失效");
      break;
  }
};

如果不熟悉es6写法的话,上述的方法名称这样定义:

function(参数){

    // 方法内容

}

提供一个查询坐标的地址;http://lbs.amap.com/console/show/picker

 

我这个只是获取经纬度,如果你还要转换成为对应的地址,自行百度,对接百度API的比较方便。

提供一个地址转换的地址:点击打开链接
下面代码来自于上面大牛提供的:

  1. var map = new BMap.Map("allmap");    // 这个需要在html主题中定义一个id为 allmap 的标签
  2. var longitude, latitude;  
  3. navigator.geolocation.getCurrentPosition(function (position) {  
  4.     longitude = position.coords.longitude;  
  5.     latitude = position.coords.latitude;  
  6. });  
  7. setTimeout(function () {  
  8.     var gpsPoint = new BMap.Point(longitude, latitude);  // 使用百度地图转换的需要转换成百度地图专用的经纬度
  9.     BMap.Convertor.translate(gpsPoint, 0, function (point) {  
  10.         var geoc = new BMap.Geocoder();  
  11.         geoc.getLocation(point, function (rs) {  
  12.             var addComp = rs.addressComponents;  
  13.             alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);  
  14.         });  
  15.     });  
  16. }, 3000);
  17.  
  18. ===========================================百度地图使用需要密钥,这里提供一个腾讯的api, 引入js之后可以直接使用的二〇一八年十月二十四日 ==============================
  19. 腾讯提供的api包括转换百度,高德坐标/将经纬度换成地址...

  20. 我试了两个, 比较好用啦
  21.  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=convertor"> </script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script>
      window.οnlοad=function(){
      //调用地址解析类
       geocoder = new qq.maps.Geocoder({
         complete: function (result) {
    // debugger;
            location.href = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + result.detail.location.lat + "," + result.detail.location.lng + ";title:想要显示的坐标名称&referer=myapp";
           }
       });
       geocoder.getLocation("北京市海淀区志新路");
      
      
      
      //console.log()
    	//$('.class-btn').attr('name','wenbin'); 百度转腾讯坐标
      //qq.maps.convertor.translate(new qq.maps.LatLng("39.91512","116.403995"), 3, function(res){
      // latlng = res[0];
      // console.log(latlng);
    //});
    
      }
    }
    </script>

    =======2019年1月9日 09:58:33==========

上面那个腾讯的不是免费的啦, 直接运行会报错 

在引入的js里面加入这个可以, 不知道能免费试用多长时间, 毕竟麻花藤有句话, 没钱玩你麻痹. 

key=GPHBZ-WBV6I-NFKG7-5BZ3O-WBEDH-WRBXV

 

 

展开阅读全文

没有更多推荐了,返回首页