关注前端 | 前端博客
当前位置: 高德地图api > 高德地图定位

高德地图定位

2018-09-26 分类:高德地图api 作者:管理员 阅读(223)

利用高德地图定位,PC端

高德地图定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高德地图定位</title>
</head>
<body>
    <h1>高德地图定位</h1>
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>
    <p id="p5"></p>
    <p id="p6"></p>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key&plugin=AMap.Geocoder"></script>
<script>

mapObj = new AMap.Map('iCenter');mapObj.plugin('AMap.Geolocation', function () {    
  geolocation = new AMap.Geolocation({        
    enableHighAccuracy: true,//是否使用高精度定位,默认:true        
    timeout: 10000,          //超过10秒后停止定位,默认:无穷大        
    maximumAge: 0,           //定位结果缓存0毫秒,默认:0        
    convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true        
    showButton: true,        //显示定位按钮,默认:true        
    buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角        
    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)        
    showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true        
    showCircle: true,        //定位成功后用圆圈表示定位精度范围,默认:true        
    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true        
    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false    
  });    
  mapObj.addControl(geolocation);    
  geolocation.getCurrentPosition();  
  AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息    
  AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});  
function onComplete(data){

  let res=data;

  //当前位置
  let adress=res.formattedAddress;

  //地区编码
  let adcode=res.addressComponent.adcode;

  //经纬度

  let lng=res.position.getLng();
  let lat=res.position.getLat();

  //定位类型
  let location_type=res.location_type;


  document.getElementById('p1').innerHTML=`您当前位置:${adress}`;
  document.getElementById('p2').innerHTML=`地区编码:${adcode}`;
  document.getElementById('p3').innerHTML=`定位类型:${location_type}`;
  document.getElementById('p4').innerHTML=`纬度:${lat}`;
  document.getElementById('p5').innerHTML=`经度:${lng}`;
  document.getElementById('p6').innerHTML=`信息:${data.message}`;
 
}
function onError(data){
  document.querySelector('h1').innerHTML=`获取不到位置的原因是:${data.message}`;
}

</script>
</body>
</html>

高德地图定位
您当前位置:四川省......

地区编码:510106

定位类型:ip

纬度:30.71623

经度:103.98027

信息:Get ipLocation success.Get address success.

PS:如果想要在手机端定位,就得把页面放在服务器上,以https开头才可以定位,通过这样的形式去访问是可以定位的

监听定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图定位</title>
</head>
<body>

<h1>高德地图定位<button id="btn">重新定位</button></h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>

<script src="http://webapi.amap.com/maps?v=1.4.6&amp;key=你申请的key&amp;plugin=AMap.Geocoder"></script>
<script>

var updateLocation = {
    location_data:{},
    loadingbox:null,
    location_status:1, //状态 0为定位 1ok -1定位失败
    //定位成功
    location_ok:function (lon,lat,res){},
    //定位失败
    location_err:function (res) {},
    //不管成失败都调
    locations:function (lon,lat,res) {},
    amapLocation:function () {
        var map = new AMap.Map('container', {
            zoom: 15,
            resizeEnable: true
        });
        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: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                buttonPosition:'RB'
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            //定位完成
            AMap.event.addListener(geolocation, 'complete', function (res) {
                updateLocation.location_status=1;
                var lon = res.position.getLng();
                var lat = res.position.getLat();
                if(typeof(updateLocation.location_ok)=='function'){
                    updateLocation.location_ok(lon,lat,res);
                }
                if(typeof(updateLocation.locations)=='function'){
                    updateLocation.locations(lon,lat,res);
                }
            });
            //定位失败
            AMap.event.addListener(geolocation, 'error', function (res) {
                updateLocation.location_status=-1;
                if(typeof(updateLocation.location_err)=='function'){
                    updateLocation.location_err(res);
                }
                if(typeof(updateLocation.locations)=='function'){
                    updateLocation.locations(0,0,res);
                }
            });
        });
    },
    //设置定位
    get_location:function () {
        //执行更新定位方法
        updateLocation.update_location();
    },
    //更新定位
    update_location:function () {
        updateLocation.loadingbox=alert('定位中...');//2
        updateLocation.location_ok=function ({lon,lat,res}) {};
        updateLocation.location_err=function (res) {};
        updateLocation.amapLocation();
        updateLocation.updateOK();  
    },
    //更新定位成功操作
    updateOK:function (){}
};



//初始化定位->获取定位
updateLocation.get_location();


//重新定位
btn.onclick=function(){
    updateLocation.update_location();
}

//定位成功
updateLocation.location_ok=function(lon,lat,res){
    console.log('定位成功',lon,lat,res)
    var addressComponent = res.addressComponent;
    var area=addressComponent.adcode;
    var address=res.formattedAddress;
    var data={'lon':lon,'lat':lat,'area':area,'address':address,}
    document.getElementById('p1').innerHTML=`您当前位置:${address}`;
    document.getElementById('p2').innerHTML=`地区编码:${area}`;
    document.getElementById('p4').innerHTML=`纬度:${lon}`;
    document.getElementById('p5').innerHTML=`经度:${lat}`;
}
//定位失败
updateLocation.location_err=function(r){
    console.log('定位失败,暂时无法获取您的位置!')
}

//更新定位成功操作
updateLocation.updateOK=function(){
    console.log('更新定位成功')
}

//完成定位后的回调函数
updateLocation.locations=function(lon,lat,res){
    console.log(lon,lat,res)
}

</script>  
</body>
</html>

进入页面首先是初始化定位,即获取定位,换了个位置,换个收货地址,需要重新定位

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 高德地图定位

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线