<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>网页定位地址获取及信息输入框</title>
	<script src='http://api.map.baidu.com/api?v=2.0&ak=fUmCszw7O7G8rBv2MO4MLLNIA5DNWLoj'></script>
</head>
<body>
	<div>
		<label>地址:</label>
		<span id='location'></span>
	</div>
	<div>
		<label>名字:</label>
		<input type='text' id='name'>
	</div>
	<div>
		<label>年龄:</label>
		<input type='text' id='age'>
	</div>
	<script>
		// 获取定位地址
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				// 获取经纬度
				var lng = r.point.lng;
				var lat = r.point.lat;
				// 根据经纬度获取地址
				var geoc = new BMap.Geocoder();
				geoc.getLocation(r.point, function(rs){
					var addComp = rs.addressComponents;
					document.getElementById('location').innerHTML = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
				});
			}
			else {
				alert('定位失败,请手动输入地址!');
			}        
		},{enableHighAccuracy: true})
<pre><code>	// 获取输入的名字和年龄
	var nameInput = document.getElementById('name');
	var ageInput = document.getElementById('age');
	var name = nameInput.value;
	var age = ageInput.value;
&lt;/script&gt;
</code></pre>
</body>
</html>
网页定位地址获取及信息输入框代码示例

原文地址: https://www.cveoy.top/t/topic/oYyI 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录