[google Autocomplete API 调用 查询 address,city,state]

主要功能：调用google  Autocomplete api  完成如下图功能。

 第一步 页面调用 google api

【https://maps.googleapis.com/maps/api/js?key=" + GoogleAPIKey + "&libraries=places&callback=InitAutocompleteCityState&language=en】

GoogleAPIKey：为自己访问【https://console.cloud.google.com/apis/dashboard】申请的google apikey,每天有免费额度。

google doc:

 第二步   需要用到的几个function

【callback=InitAutocompleteCityState】

 InitAutocompleteCityState: function () {
        var OptionsCity = {
            types: ["(cities)"], componentRestrictions: { country: "us" },
            fields: ["formatted_address", "address_components"], //"address_components", "geometry", "icon",
        };

   

        CityAutocomplete = new google.maps.places.Autocomplete((document.getElementById('Input_SearchCityState')), OptionsCity);
        CityAutocomplete.addListener('place_changed', function () { Detail.FillInGoogleAddress('B', CityAutocomplete); });

   
    }

FillInGoogleAddress

FillInGoogleAddress: function (tp, acomplete) {

        $("#Input_" + tp + "_route").val('');
        $("#Input_" + tp + "_zipcode").val('');
        $("#Input_" + tp + "_city").val('');
        $("#Input_" + tp + "_county").val('');
        $("#Input_" + tp + "_state").val('');
        $("#Input_" + tp + "_country").val('');

        var place = acomplete.getPlace();


        if (place != undefined && place.address_components != undefined) {
            //address
            var vraddress = place.address_components.find(function (e) { return e.types[0] == "route" });
            if (vraddress != undefined) {
                $("#Input_" + tp + "_route").val(vraddress.short_name);
            }
            //zipcode
            var vrzipcode = place.address_components.find(function (e) { return e.types[0] == "postal_code" });
            if (vrzipcode != undefined) {
                $("#Input_" + tp + "_zipcode").val(vrzipcode.short_name);
            }
            //city
            var vrcity = place.address_components.find(function (e) { return e.types[0] == "locality" });
            if (vrcity != undefined) {
                $("#Input_" + tp + "_city").val(vrcity.short_name);
            }
            //county
            var vrcounty = place.address_components.find(function (e) { return e.types[0] == "administrative_area_level_2" });
            if (vrcounty != undefined) {
                $("#Input_" + tp + "_county").val(vrcounty.short_name);
            }
            //state
            var vrstate = place.address_components.find(function (e) { return e.types[0] == "administrative_area_level_1" });
            if (vrstate != undefined) {
                $("#Input_" + tp + "_state").val(vrstate.short_name);
            }
            //country
            var vrcountry = place.address_components.find(function (e) { return e.types[0] == "country" });
            if (vrcountry != undefined) {
                $("#Input_" + tp + "_country").val(vrcountry.short_name);
            }

        }

html: 

<input id="Input_SearchCityState" type="text"  />