字体-字体+

使用高德地图获取浏览器精准定位

2018-02-07 Javascript/Jquery 访问量 108

上次说到百度地图获取浏览器的定位,今天的主角便是我推荐的高德地图api,的确,用过高德地图来做开发后,便远远的抛弃了百度地图,真的是无论从界面美观还是好用,好用,好用(这么重要的事情我要说三遍)上来说,都将是你不错的选择,下面破晓猫就带你来了解一下它的神奇之处吧。

今天的这个demo是可以获取到客户端浏览器的一个比较精准的定位的,但是这个数据一般来说不太靠谱,所以大多数情况下,只需要获取到市就行了。

先来看看它的demo吧。

//还是先引入一个api,具体的keyd amap.com上去申请,相信这个应该难不倒人。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=04aae******a89ddf456b3af8ba1"></script>



var map, geolocation;
        //加载地图,调用浏览器定位服务
        map = new AMap.Map('');//如果使用地图,请赶写一个id,这里不用加载地图
        map.plugin('AMap.Geolocation', function() {
          /*geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位,默认:true
            timeout: 10000,          //超过10秒后停止定位,默认:无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
            buttonPosition:'RB'
          });*/
          //这些照搬就行,部分根据自己实际需要来调整
          geolocation = new AMap.Geolocation();
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
          AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
       
    
    
    //解析定位结果
    function onComplete(data) {
        console.log(data);
      var str=['定位成功'];
      str.push('经度:' + data.position.getLng());
      str.push('纬度:' + data.position.getLat());
      if(data.accuracy){
        str.push('精度:' + data.accuracy + ' 米');
      }//如为IP精确定位结果则没有精度信息

      //var info = JSON.parse(JSON.stringify(data));
      str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
      str.push('你的当前位置:' + (data.formattedAddress));
      var lnglatXY = [data.position.getLng(),data.position.getLat()];
      console.log(lnglatXY)
      AMap.service('AMap.Geocoder',function(){//回调函数
          //实例化Geocoder
          geocoder = new AMap.Geocoder({
              city: "010"//城市,默认:“全国”
          });
          //TODO: 使用geocoder 对象完成相关功能
          geocoder.getAddress(lnglatXY, function(status, result) {
              console.log('---------------')
              console.log(result)
              if (status === 'complete' && result.info === 'OK') {
                 //获得了有效的地址信息:
                 //即,result.regeocode.formattedAddress
                alert(result.regeocode.formattedAddress)//这个能获取到具体的街道
                alert(result.regeocode.addressComponent.city)//获取城市
                 
              }else{
                 //获取地址失败
                 alert('定位失败,请手动选择')
              }
          }); 
      })
       
    }
    //解析定位错误信息
    function onError(data) {
      alert('定位失败');
    }

具体的获取参数,请使用console.log(result)去查看。

由于定位精准的原因,稍微有点点慢,但是效果你绝对会满意的。

高德定位

标签:

原文来自:http://www.dawnfly.cn/article-1-388.html,转载请注明出处,谢谢【破晓博客复制链接地址