从邮政编码谷歌地理编码获取城市名称

时间:2012-04-26 20:07:37

标签: javascript jquery google-maps-api-3 google-geocoding-api

我在这个网站上找到了从邮政编码中获取日期的代码,但我还需要获取城市名称。

以下是获取州的代码: (注意我也使用jQuery)

var geocoder = new google.maps.Geocoder();

    $('.zip').bind('change focusout', function () {
        var $this = $(this);
        if ($this.val().length == 5) {
            geocoder.geocode({ 'address': $this.val() }, function (result, status) {
                var state = "N/A";
                //start loop to get state from zip
                for (var component in result[0]['address_components']) {
                    for (var i in result[0]['address_components'][component]['types']) {
                        if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
                            state = result[0]['address_components'][component]['short_name'];
                            // do stuff with the state here!
                            $this.closest('tr').find('select').val(state);
                        }
                    }
                }
            });
        }
    });  

4 个答案:

答案 0 :(得分:9)

只需添加result[0]['address_components'][1]['long_name']

即可

所以它会是

var geocoder = new google.maps.Geocoder();

$('.zip').bind('change focusout', function () {
    var $this = $(this);
    if ($this.val().length == 5) {
        geocoder.geocode({ 'address': $this.val() }, function (result, status) {
            var state = "N/A";
            var city = "N/A";
            //start loop to get state from zip
            for (var component in result[0]['address_components']) {
                for (var i in result[0]['address_components'][component]['types']) {
                    if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
                        state = result[0]['address_components'][component]['short_name'];
                        // do stuff with the state here!
                        $this.closest('tr').find('select').val(state);
                        // get city name
                        city = result[0]['address_components'][1]['long_name'];
                        // Insert city name into some input box
                        $this.closest('tr').find('.city').val(city);
                    }
                }
            }
        });
    }
});  

答案 1 :(得分:7)

我重写了以上解决方案,看起来更优雅:

var zipCode = '48201';
var country = 'United States';               

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': zipCode + ',' + country }, function (result, status) {

    var stateName = '';
    var cityName = '';

    var addressComponent = result[0]['address_components'];

    // find state data
    var stateQueryable = $.grep(addressComponent, function (x) {
        return $.inArray('administrative_area_level_1', x.types) != -1;
    });

    if (stateQueryable.length) {
        stateName = stateQueryable[0]['long_name'];

        var cityQueryable = $.grep(addressComponent, function (x) {
            return $.inArray('locality', x.types) != -1;
        });

        // find city data
        if (cityQueryable.length) {
            cityName = cityQueryable[0]['long_name'];
        }
    }
});

答案 2 :(得分:6)

以下是使用googleapis从Zipcode检查城市名称的代码。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>      
<script>    
        var geocoder;
        var map;        
        function codeAddress() {
            geocoder = new google.maps.Geocoder();
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {                       

                    for (var component in results[0]['address_components']) {
                        for (var i in results[0]['address_components'][component]['types']) {
                            if (results[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
                                state = results[0]['address_components'][component]['long_name'];
                                alert(results[0]['address_components'][1]['long_name'] + ' , '  + state);
                            }
                        }
                    }                                           
                } else {
                    alert('Invalid Zipcode');
                }
            });
        }         

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

答案 3 :(得分:-1)

我慷慨地提供了我为我们做的精确模块。它返回一个对象,如:

{ 
  country : { long_name : "someString", short_name : "someStrong" },
  city : { long_name : "someString", short_name : "someString" },
  state : { long_name : "someString", short_name : "someString" }
}

可以使用代码调用:let test = new ZipCodeDeconstructor().deconstruct('20009');

这是用TypeScript写的(乘坐火车)并在node.js中使用(你应该已经在火车上了。

如果您还没有request-promise,请运行npm i request-promise --save并确保您的TypeScript配置允许使用async/await个关键字。

这基本上是使用了所有东西&#34; new&#34;截至撰写本文时,它应该在未来一段时间内非常有用。

let rp = require('request-promise');
enum IGoogleMapResultType {
  COUNTRY = <any>'country',
  LOCALITY = <any>'locality',
  SUBLOCALITY_LEVEL_1 = <any>'sublocality_level_1',
  ADMINISTRATIVE_AREA_LEVEL_1 = <any>'administrative_area_level_1',
    // These may be used later, don't delete them, they're for reference
  POSTAL_CODE = <any>'postal_code',
  NEIGHBORHOOD = <any>'neighborhood',
  POLITICAL = <any>'political',
  ADMINISTRATIVE_AREA_LEVEL_2 = <any>'administrative_area_level_2',
  ADMINISTRATIVE_AREA_LEVEL_3 = <any>'administrative_area_level_3'
}
interface IGoogleMapResult {
  address_components : {
    long_name? : string
    short_name? : string
    types : IGoogleMapResultType[]
  }[],
  formatted_address : string,
  geometry: any,
  place_id: string,
  types: IGoogleMapResultType[]
}
type IGoogleMapResults = any[];
type ZipCodeDeconstructorProperty = {
  long_name: string,
  short_name: string
}
// What we return from this component
export type ZipCodeDeconstructorResponse = {
  city: ZipCodeDeconstructorProperty,
  state: ZipCodeDeconstructorProperty,
  country: ZipCodeDeconstructorProperty
}
export class ZipCodeDeconstructor {
  static apiUrl = "http://maps.googleapis.com/maps/api/geocode/json?address=";
  constructor() {}
  // main entry point, deconstruct a 5 digit zip into city, state, zip into the corresponding properties
  async deconstruct(zip):Promise<ZipCodeDeconstructorResponse> {
    let response:any = await this._makeCall(zip);
    let firstResult = response.results[0];
    let returnObject = {
      city :  this._extractCity(firstResult),
      state : this._extractState(firstResult),
      country : this._extractCountry(firstResult)
    };
    console.log("[Zip Code Deconstructor] returning: ", returnObject);
    return returnObject;
  }
  private _createZipcodeUrl(zip) {
    return ZipCodeDeconstructor.apiUrl + zip + '&sensor=true';
  }
  private async _makeCall(zip) {
    return await rp({uri : this._createZipcodeUrl(zip), json : true });
  }
  private _extractOfTypeFromResult(typesArray:IGoogleMapResultType[], result:IGoogleMapResult) {
    for(let i = 0; i < result.address_components.length; i++) {
      let addressComponentAtIndex = result.address_components[i];
      let type:IGoogleMapResultType = addressComponentAtIndex.types[0];
      if(typesArray.indexOf(type) !== -1) {
        return {
          long_name : addressComponentAtIndex.long_name,
          short_name : addressComponentAtIndex.short_name
        }
      }
    }
  }
  private _extractCity(result:IGoogleMapResult) {
    return this._extractOfTypeFromResult([IGoogleMapResultType.SUBLOCALITY_LEVEL_1, 
      IGoogleMapResultType.LOCALITY], result)
  }
  private _extractState(result:IGoogleMapResult) {
    return this._extractOfTypeFromResult([IGoogleMapResultType.ADMINISTRATIVE_AREA_LEVEL_1], result);
  }
  private _extractCountry(result:IGoogleMapResult) {
    return this._extractOfTypeFromResult([IGoogleMapResultType.COUNTRY], result);
  }
}
// let test = new ZipCodeDeconstructor().deconstruct('20009');

顶部的界面应该帮助您了解返回的内容以及应该传递的内容。