高德地图浏览器定位

最新推荐文章于 2024-04-10 10:18:03 发布

M.François

最新推荐文章于 2024-04-10 10:18:03 发布

阅读量4k

点赞数

文章标签：高德地图

本文链接：https://blog.csdn.net/u013538542/article/details/46348677

版权

<!DOCTYPE HTML>
<html>
<head>
<title>浏览器定位</title>
<style type="text/css">
body{
margin:0;
height:100%;
width:100%;
position:absolute;
}
#mapContainer{
position: absolute;
top:0;
left: 0;
right:0;
bottom:0;
}
#tip{
min-height:65px;
background-color:#fff;
padding-left:10px;
padding-right:10px;
position:absolute;
font-size:12px;
right:10px;
bottom:20px;
border-radius:3px;
line-height:18px;
border:1px solid #ccc;

}

#tip input[type='button']{
margin-left: 10px;
margin-right:10px;
margin-top:10px;
background-color: #0D9BF2;
height:30px;
text-align:center;
line-height:30px;
color:#fff;
font-size:12px;
border-radius:3px;
outline: none;
border:0;
float:right;

}
</style>
<body>

<div id='mapContainer'></div>
<div id="tip">
<div>
<input type="button" value="持续监控位置" οnclick="watchPosition()"/>
<input type="button" value="获得当前位置" οnclick="getCurrentPosition()"/>
</div>
<div style="color: #C0C0C0">不支持IE9以下版本</div>
<div id="r_title"><b>定位结果:</b></div>
<div id="result"></div>
</div>

<script src='http://webapi.amap.com/maps?v=1.3&key=你的密钥'></script>
<script type="text/javascript">
var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('mapContainer', {
resizeEnable: true
});
map.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
});
map.addControl(geolocation);
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//获取当前位置信息
function getCurrentPosition () {
geolocation.getCurrentPosition();
};
//监控当前位置并获取当前位置信息
function watchPosition () {
geolocation.watchPosition();
};
//解析定位结果
function onComplete (data) {
var str = '<div>定位成功</div>';
str += '<div>经度：' + data.position.getLng() + '</div>';
str += '<div>纬度：' + data.position.getLat() + '</div>';
str += '<div>精度：' + data.accuracy + ' 米</div>';
str += '<div>是否经过偏移：' + (data.isConverted ? '是' : '否') + '</div>';
result.innerHTML = str;

};
//解析定位错误信息
function onError (data) {
var str = '<p>定位失败</p>';
str += '<p>错误信息：'
switch(data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
str += '</p>';
result.innerHTML = str;
};

setTimeout("getCurrentPosition()",7000);

</script>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<div id="showdivdetails"></div>
</body>
</html>