利用高德地图定位,PC端
高德地图定位
<!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开头才可以定位,通过这样的形式去访问是可以定位的
监听定位
<!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
>
进入页面首先是初始化定位,即获取定位,换了个位置,换个收货地址,需要重新定位
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 高德地图定位