高德地图定位

2018-09-26 分类：高德地图api 作者：管理员阅读（84）

利用高德地图定位,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&key=你申请的key&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) 打赏