|
浏览器精确定位
html,body,#container{
height:100%;
}
.info{
width:26rem;
}
.amap-icon img,
.amap-marker-content img{
width: 20px;
height: 30px;
}
由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。
// 创建地图实例
var map = new AMap.Map('container', {
resizeEnable: true
});
// 添加覆盖物
function addMaker(lng,lat){
var marker = new AMap.Marker({
position: new AMap.LngLat(lng,lat),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30),
size: new AMap.Size(15, 14),
});
map.add(marker);
}
// 高德地图获取定位信息
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition:'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
// 添加定位控件
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位结果
function onComplete(data) {
document.getElementById('status').innerHTML='定位成功'
var str = [];
let cir = ''
let radius = 10;
let isAdd = true;
// 定位成功之后，画一个覆盖物和圆圈动画
addMaker(data.position.lng,data.position.lat)
let timer = setInterval(()=>{
// 修改半径
if(radius == 10){
isAdd = true;
}
if(radius == 50){
isAdd = false;
}
if(isAdd){
radius+=2;
} else {
radius-=2;
}
cir && map.remove(cir)
cir = drawCircle(data.position.lng,data.position.lat,radius)
},100)
str.push('定位结果：' + data.position);
str.push('定位类别：' + data.location_type);
if(data.accuracy){
str.push('精度：' + data.accuracy + ' 米');
}//如为IP精确定位结果则没有精度信息
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('');
}
//解析定位错误信息
function onError(data) {
document.getElementById('status').innerHTML='定位失败'
document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
}
// 画圆圈
function drawCircle(lng,lat,radius){
var circle = new AMap.Circle({
center: [lng, lat],
radius: radius, //半径
borderWeight: 3,
strokeColor: "#FFF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'solid',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
circle.setMap(map)
return circle;
}
先粘贴上代码了 注意事项:需要在高德地图开发者平台注册相关key，附上才可以用， 除了圆圈动画，其他都是高德的api，直接搬过来就可以用， 其中也用百度地图试过，但是百度地图浏览器定位不准，只有苹果机定位准确，所以放弃了百度地图，渣渣前端，请勿嫌弃
|