Javascript 如何从postalcode获取地址，就像royalmail查找邮政编码一样
我的问题是: 如何从postalcode获取地址，就像royalmail查找邮政编码一样 为此，我创建了一个演示页面，并进行了大量的研发，但没有获得任何证书。 您可以查看演示页面和皇家邮政网站，然后输入postalcode“HA5 1AA” 其中皇家邮政返回5个结果，谷歌只返回一个结果 请给我答案或一些提示Javascript 如何从postalcode获取地址，就像royalmail查找邮政编码一样,javascript,google-maps,googleplacesautocomplete,Javascript,Google Maps,Googleplacesautocomplete,我的问题是: 如何从postalcode获取地址，就像royalmail查找邮政编码一样 为此，我创建了一个演示页面，并进行了大量的研发，但没有获得任何证书。 您可以查看演示页面和皇家邮政网站，然后输入postalcode“HA5 1AA” 其中皇家邮政返回5个结果，谷歌只返回一个结果 请给我答案或一些提示 基于您的代码和在强大的谷歌母舰上找到的一些代码，我想这应该能帮助您继续前进 <!doctype html> <html xmlns='http://www.w3.org
基于您的代码和在强大的谷歌母舰上找到的一些代码，我想这应该能帮助您继续前进
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Geocode address - find Postcode</title>
<meta charset='utf-8' />
<style type='text/css'>
body {
font-family: Arial;
font-size: 10pt;
}
#map {
height: 100%;
}
html, body {
height: 100vh;
margin: 0;
padding: 0;
}
#latlng {
width: 225px;
}
#container{
display:block;
height:500px;
width:500px;
margin:0 auto;
}
#data{
width:100%;
height:2rem;
padding:1rem;
box-sizing:border-box;
display:block;
}
#txtPlaces{
width:100%;
box-sizing:border-box;
padding:1rem;
margin:0 auto 1rem auto;
}
</style>
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyDsCn5YSPGtKhk3RiU2svNV5GKEEMJc84I&libraries=places'></script>
<script type='text/javascript'>
(function(){
var map,infowindow,lat,lng,geocoder,data;
var place,address,geometry,marker,content;
function initMap() {
/* default location */
lat=53.971481395939115;
lng=-3.439286750000065;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat:lat, lng:lng }
});
marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point( 0, -32 )
});
content=document.getElementById('content');
geocoder = new google.maps.Geocoder;
infowindow = new google.maps.InfoWindow;
infowindow.setContent( content );
var autocomplete = new google.maps.places.Autocomplete( document.getElementById('txtPlaces') );
autocomplete.bindTo('bounds', map );
marker.setVisible( false );
autocomplete.addListener('place_changed', function() {
infowindow.close();
place = autocomplete.getPlace();
if( !place.geometry ) {
alert( 'Bad foo: '+place.name );
return false;
}
if( place.geometry.viewport ) {
map.fitBounds( place.geometry.viewport );
} else {
map.setCenter( place.geometry.location );
map.setZoom(15);
}
marker.setPosition( place.geometry.location );
marker.setVisible( true );
address = '';
if( place.address_components ) {
address = [
( place.address_components[0] && place.address_components[0].short_name || '' ),
( place.address_components[1] && place.address_components[1].short_name || '' ),
( place.address_components[2] && place.address_components[2].short_name || '' ),
( place.address_components[3] && place.address_components[3].short_name || '' ),
( place.address_components[4] && place.address_components[4].short_name || '' ),
( place.address_components[5] && place.address_components[5].short_name || '' )
].join( ' ' );
}
content.children['place-icon'].src = place.icon;
content.children['place-name'].textContent = place.name;
content.children['place-address'].textContent = address;
infowindow.open( map, marker );
geocodeLatLng( geocoder );
});
}
function geocodeLatLng( geocoder ) {
address=document.getElementById('txtPlaces').value;
data = document.getElementById('data');
geocoder.geocode({ 'address': address }, function( results, status ) {
if ( status === 'OK' ) {
if ( results[0] ) {
geometry=results[0].geometry.location;
latlng=new google.maps.LatLng( geometry.lat(), geometry.lng() );
map.setZoom( 17 );
map.setCenter( latlng );
data.innerHTML=results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
})();
</script>
</head>
<body>
<h1>Location:</h1>
<div id='content'>
<img src='' width='16' height='16' id='place-icon'>
<span id='place-name' class='title'></span><br>
<span id='place-address'></span>
</div>
<div id='container'>
<input type='text' id='txtPlaces' placeholder='Enter a location' />
<div id='map'></div>
<span id='data'></span>
</div>
</body>
</html>
地理编码地址-查找邮政编码
身体{
字体系列：Arial；
字号：10pt；
}
#地图{
身高：100%；
}
html，正文{
高度：100vh；
保证金：0；
填充：0；
}
#板条{
宽度：225px；
}
#容器{
显示：块；
高度：500px；
宽度：500px；
保证金：0自动；
}
#资料{
宽度：100%；
高度：2em；
填充：1rem；
框大小：边框框；
显示：块；
}
#txtPlaces{
宽度：100%；
框大小：边框框；
填充：1rem；
裕度：0自动1rem自动；
}
（功能（）{
var地图、信息窗口、lat、lng、地理编码器、数据；
变量位置、地址、几何图形、标记、内容；
函数initMap（）{
/*默认位置*/
lat=53.971481395939115；
液化天然气=-3.43928675000065；
map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：{lat:lat，lng:lng}
});
marker=新的google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-32）
});
content=document.getElementById（'content'）；
geocoder=新的google.maps.geocoder；
infowindow=新建google.maps.infowindow；
infowindow.setContent（content）；
var autocomplete=new google.maps.places.autocomplete（document.getElementById（'txtPlaces'）；
autocomplete.bindTo（'bounds'，map）；
marker.setVisible（假）；
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
place=autocomplete.getPlace（）；
如果（！place.geometry）{
警报（'Bad foo:'+place.name）；
返回false；
}
如果（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图设置中心（地点、几何、位置）；
map.setZoom（15）；
}
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
地址=''；
if（place.address_组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]和&place.address_components[2]。简称| | |“”），
（place.address_components[3]&&place.address_components[3]。简称| | |“”），
（place.address_components[4]&&place.address_components[4]。简称| | |“”），
（place.address_components[5]&&place.address_components[5]。简称| |“”）
].加入（“”）；
}
content.children['place-icon'].src=place.icon；
content.children['place-name'].textContent=place.name；
content.children['place-address'].textContent=地址；
信息窗口。打开（地图、标记）；
地理编码器LATLNG（地理编码器）；
});
}
功能地理编码器LATLNG（地理编码器）{
地址=document.getElementById（'txtPlaces'）。值；
data=document.getElementById（'data'）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
如果（状态=='OK'）{
如果（结果[0]）{
geometry=结果[0]。geometry.location；
latlng=新的google.maps.latlng（geometry.lat（），geometry.lng（））；
map.setZoom（17）；
地图设置中心（latlng）；
data.innerHTML=results[0]。格式化的\u地址；
}否则{
window.alert（“未找到结果”）；
}
}否则{
window.alert（'地理编码器由于：'+状态而失败）；
}
});
}
document.addEventListener（'DOMContentLoaded'，initMap，false）；
})();
地点：