效果图:
实现代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>浏览器定位</title>
<style type="text/css">
html, body {margin: 0;height: 100%;width: 100%;position: absolute;}
#container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;}
.button-group {position: absolute;bottom: 20px;right: 20px;font-size: 12px;padding: 10px;}
.button-group .button {height: 28px;line-height: 28px;background-color: #0D9BF2;color: #FFF;border: 0;outline: none;padding-left: 5px;padding-right: 5px;border-radius: 3px;margin-bottom: 4px;cursor: pointer;}
.button-group .inputtext {height: 26px;line-height: 26px;border: 1px;outline: none;padding:0 5px;border-radius: 3px;margin-bottom: 4px;cursor: pointer;}
.adders-pop{top:0;left:0;width:100%;height:100%;z-index:20;position:absolute;background:rgba(0,0,0,0.5);}
#locationWarn{color:#fff;}
</style>
</head>
<body>
<div class="adders-pop">
<input type="text" name="" id="locationText" value="" />
<input type="text" name="" id="locationLng" value="" />
<input type="text" name="" id="locationLat" value="" />
<div id="locationWarn"></div>
</div>
<div id='container' ></div>
</body>
</html>
<script type="text/javascript" src="${base}/static_material/public/jquery-3.3.1.min/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'你的code',
}
</script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.ToolBar'></script>
<script type="text/javascript">
var map, geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map('container', {
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: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
buttonPosition: 'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var str = ['定位成功'];
str.push('经度:' + data.position.getLng());
$('#locationLng').val(data.position.getLng())
str.push('纬度:' + data.position.getLat());
$('#locationLat').val(data.position.getLat())
lnglatXY = [data.position.getLng(), data.position.getLat()]; //已知点坐标
regeocoder(lnglatXY);
if (data.accuracy) {
str.push('精度:' + data.accuracy + ' 米');
} //如为IP精确定位结果则没有精度信息
str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
$('#locationWarn').html(str.join('<br>'))
}
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
function regeocoder(loc) { //逆地理编码
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(loc, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
console.dir(result);
geocoder_CallBack(result);
}
});
var marker = new AMap.Marker({ //加点
map: map,
position: loc
});
map.setFitView();
}
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
$('#locationText').val(address)
}
</script>