7

私はこのサイトで郵便番号の状態を取得するコードを見つけましたが、都市名も取得する必要があります。ここで郵便番号から市の名前を取得するgoogle geocoding

は、状態を取得するための私のコードです: (私も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); 
         } 
        } 
       } 
      }); 
     } 
    }); 
+0

あなたは私のジッパーを使用して、場所の名前を取得するための他のjqueryのコードを共有することができます私もそれを探しています...... – Techy

答えて

8

ちょうど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

あなたはTotal MAAAANです!!!!どうもありがとう!! – boruchsiper

+0

Hehe ..いつでも:) –

+2

address_componentsのインデックスを使用するのは矛盾しないので注意してください! –

6

だろうより上に見えるように上記のソリューション:

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']; 
     } 
    } 
}); 
+1

郵便番号から都市を検索するためのGoogleジオコードの問題があるようです。たとえば、 "59650、France"を求めると、Villeneuve d'Ascqの代わりにWattrelosが返されます。フランスとドイツでテストされた他の都市と同じです。なぜそれを修正する方法がわからない、知らない。 –

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> 
+0

あなたはjqueryを使用していませんでした。これは私が欲しかったものです。+1 – Dheeraj

+0

申し訳ありませんが、取得していません。 – Nimesh

+0

私はあなたのコードは私に有用だと言った – Dheeraj

0

私は私が私たちのためにこれを行うには、圧延正確なモジュールを提供するのに十分寛大です。それは、次のようなオブジェクトを返します。

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

とコードを使用して呼び出すことができます。これはTypeScriptで書かれた(その電車に乗る)とnode.jsで使用されているlet test = new ZipCodeDeconstructor().deconstruct('20009');

(あなたはすでにその列車にする必要がありますあなたはまだrequest-promiseを持っていない場合。

npm i request-promise --saveを実行し、async/awaitキーワードを使用するためにあなたの活字体の構成が可能にしてください。

これは基本的にはこれが書かれている時点ですべて「新しい」ものを使用しているので、しばらくの間はかなり役に立ちます。上部の

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'); 

のインターフェイスが返される何とで渡されるべきものを理解する道に沿ってあなたを助ける必要があります。

関連する問題