<!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>Amap 高德地图根据地址获取省市区街道</title>
<!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>-->
<link rel="stylesheet" href="css/demo-center.css"/>
<style>
html,body,#container{
height:100%;
width:100%;
}
.btn{
width:10rem;
margin-left:6.8rem;
}
</style>
</head>
<body>
<div id="container" class="map" tabindex="0"></div>
<div class="input-card" style='width:28rem;'>
<div class='input-title' style='color:rgb(0, 0, 0)'>地址街道信息查询</div>
<div class='input-subtitle' >请输入你需要查询的地址。</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
<input id='address' type="text" value='深圳市罗湖区布心路水贝地铁站' >
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">省</span></div>
<input id='province' disabled type="text">
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">市</span></div>
<input id='city' disabled type="text">
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">区</span></div>
<input id='district' disabled type="text">
</div>
<div class="input-item">
<div class="input-item-prepend"><span class="input-item-text">街道/乡镇</span></div>
<input id='street' disabled type="text">
</div>
<input id="geo" type="button" class="btn" value="查询一下" />
<div>
<div class='output-title'>当前查询地址:</div>
<div class='output-result' id='address_2'></div>
</div>
</div>
<script src="js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=160cab8ad6c50752175d76e61ef92c50&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=160cab8ad6c50752175d76e61ef92c50&plugin=AMap.ToolBar'></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=160cab8ad6c50752175d76e61ef92c50&plugin=AMap.Autocomplete"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
var map = new AMap.Map('container', {
zoom: 16,
scrollWheel: true,
resizeEnable: true
})
var positionPicker = new PositionPicker({
mode: 'dragMap',
map: map
});
var auto = new AMap.Autocomplete({
input: "address"
});
function geoCode() {
var geocoder = new AMap.Geocoder({
});
var address = document.getElementById('address').value;
geocoder.getLocation(address, function(status, result) {
if (status === 'complete'&&result.geocodes.length) {
var lnglat = result.geocodes[0].location
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var street = result.regeocode.addressComponent.township
document.getElementById('province').value = result.regeocode.addressComponent.province;
document.getElementById('city').value = result.regeocode.addressComponent.city;
document.getElementById('district').value = result.regeocode.addressComponent.district;
document.getElementById('street').value = street;
}else{
log.error('根据地址查询地址失败')
}
});
map.setCenter(lnglat);
positionPicker.start(map.getBounds().getCenter())
}else{
log.error('根据地址查询位置失败');
}
});
}
positionPicker.on('success', function(positionResult) {
var geocoder = new AMap.Geocoder({
});
document.getElementById('address_2').innerHTML = positionResult.address;
geocoder.getAddress(positionResult.position, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var street = result.regeocode.addressComponent.township
document.getElementById('province').value = result.regeocode.addressComponent.province;
document.getElementById('city').value = result.regeocode.addressComponent.city;
document.getElementById('district').value = result.regeocode.addressComponent.district;
document.getElementById('street').value = street;
}else{
log.error('根据地址查询地址失败')
}
});
});
positionPicker.on('fail', function(positionResult) {
document.getElementById('province').value = '超出查询范围';
});
var getplace = document.getElementById("geo");
var getAddresskey = document.getElementById('address')
AMap.event.addDomListener(getplace, 'click', function() {
geoCode();
})
AMap.event.addDomListener(getAddresskey, 'keydown', function(e) {
if (e.keyCode === 13) {
geoCode();
return false;
}
return true;
})
positionPicker.start();
map.panBy(0, 1);
map.addControl(new AMap.ToolBar({
liteStyle: true
}))
});
</script>
</body>
</html>
https://scorpionfree98.github.io/fetch_address_detail/Geocoder.html