Google地图自动填充功能(销毁和重复使用)

时间:2017-07-05 14:46:25

标签: javascript google-maps google-maps-api-3 autocomplete

我有一个使用Google Maps Javascript API的网络应用程序。

我希望能够做的其中一件事是过滤'结果。

目前,我有4个按钮(All,State,City,Zip)。

按下全部按钮时,没有过滤器,googleMaps选项仅为

var options = {componentRestrictions: {country: 'us'}};

当我按下城市按钮时,我希望能够运行

autocomplete.setTypes(['(cities)'])并且只有城市出现在该会话中。

这是我的代码,我一直在尝试搜索其他地方,但还没有发现任何东西。感谢您提供的帮助!

var input        = document.getElementById(this.$refs.geography_search.id);
var options      = {componentRestrictions: {country: 'us'}};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
if (!place.geometry) {
    window.alert("No details available for input: '" + place.name + "'");
        return;
    }
});

if (this.buttonActivated == 'city') {
     google.maps.event.clearInstanceListeners(autocomplete);
     autocomplete.setTypes(['(cities)']);
}

1 个答案:

答案 0 :(得分:0)

只需删除并插入输入元素即可破坏Google自动填充

var location_search_input = $( ".search_input_container" ).html();

$( ".search_input_container" ).html( '' );

$( ".search_input_container" ).html( location_search_input);

这里是完整代码。

这将为您提供帮助。.

function initAutocomplete() {

    jQuery( document ).ready( function($){ 

        $('.type_of_search').selecter();

        var location_search_input = $( ".search_input_container" ).html();

        $(".type_of_search").change( function(){

            if( $( this ).val() == "name" ) {

                $( ".search_input_container" ).html( '' );
                $( ".search_input_container" ).html( location_search_input );

            } else {

                     function fillInAddress() {

                            var place = autocomplete.getPlace();
                            var lat = place.geometry.location.lat();
                            console.log(lat);
                            var lng = place.geometry.location.lng();
                            console.log(lng);
                            document.getElementById("latitude").value = lat;
                            document.getElementById("longitude").value = lng;
                      }

                      var placeSearch, autocomplete;
                      var componentForm = {
                        street_number: 'short_name',
                        route: 'long_name',
                        locality: 'long_name',
                        administrative_area_level_1: 'short_name',
                        country: 'long_name',
                        postal_code: 'short_name'
                      };

                        autocomplete = new google.maps.places.Autocomplete(
                            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete_1')),
                            {types: ['geocode']});

                        // When the user selects an address from the dropdown, populate the address
                        // fields in the form.
                        autocomplete.addListener('place_changed', fillInAddress);
                 }

        } ).change(); 

    });


}