如何从邮政编码中获取地址,如皇家邮件查找邮政编码

时间:2018-02-23 05:53:29

标签: javascript google-maps googleplacesautocomplete

我的问题是: 如何从邮政编码中获取地址,如皇家邮件查找邮政编码?

为此,我创建了一个演示页面,并做了很多R& D但没有得到任何scussess。 你可以查看演示页面和皇家邮件网站并输入邮政编码" HA5 1AA"

http://www.gibbs-gillespie.co.uk/zipcodeaddress.html

https://www.royalmail.com/find-a-postcode

如果皇家邮件返回5结果,谷歌只返回一个结果。

请给我解决方案或一些提示

由于

2 个答案:

答案 0 :(得分:0)

根据您的代码以及强大的Google母舰上发现的一些代码,我认为这应该有助于您前进。

<!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>

答案 1 :(得分:0)

要像 Royal Mail 的解决方案一样添加邮政编码查找器,您需要从 PAF 解决方案提供商处获得许可。 Royal Mail 提供的地址列表比 Google Places 准确得多,而且是最新的。

在英国,有几家供应商;这是一个列表:https://www.poweredbypaf.com/using-our-address-data/find-a-ready-made-solution/

Ideal Postcodes 是一家提供邮政编码查找 + 附加数据集的供应商。例如,multiple residence dataset 捕获位于多个居住建筑物内的子场所,这些建筑物没有自己的公共可用交付点(例如,一个信箱、邮寄点等)。这就是为什么您在 Royal Mail 的邮政编码查找器中看到的地址可能多于 Google 的解决方案的原因。