Gaode map obtains its current location information

Renderings:
Implementation code:
<!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>
Gaode map obtains its current location information

Guess you like
