时间戳

首页 > 解决方案 > 从谷歌地方提取数据 api address_components

javascript - 从谷歌地方提取数据 api address_components

问题描述

我在页面中有这个自动完成组件，但是address_components返回的数据长度不同，因此很难确定哪些索引代表城市或州。这是代码

$(document).ready(function(){
 var input = document.getElementById('elm_19');
var options = {
    componentRestrictions: {
        country: 'uk'
    }
};

var autocomplete = new google.maps.places.Autocomplete(input, options);

$(input).on('input',function(){
    var str = input.value;
  var prefix = '';
    if(str.indexOf(prefix) == 0) {
        console.log(input.value);
    } else {
        if (prefix.indexOf(str) >= 0) {
        input.value = prefix;
    } else {
        input.value = prefix+str;
   }
    }

});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    var lat = place.geometry.location.lat();
    var long = place.geometry.location.lng();
    /**
    var city = place.address_components[3].long_name;
    var country = place.address_components[6].short_name;
    var state = place.address_components[4].short_name;
    var zip = place.address_components[7].long_name;
     
    $("#elm_23").val(city);
    $("#elm_27").val(country).change();
    $("#elm_25 option:selected").text(state);
    $("#elm_29").val(zip);
    */
    
});
});

是否有一种永久的方法可以始终获取索引，city,country,state and zip因为每个选定地址的索引都在自动完成？

标签： javascriptgoogle-places-apigoogleplacesautocomplete

解决方案

我使用了地理编码api并像这样解决了它

    $(document).ready(function(){
    
    
     var input = document.getElementById('elm_19');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    
    $(input).on('input',function(){
        var str = input.value;
      var prefix = '';
        if(str.indexOf(prefix) == 0) {
            console.log(input.value);
        } else {
            if (prefix.indexOf(str) >= 0) {
            input.value = prefix;
        } else {
            input.value = prefix+str;
       }
        }
    
    });

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    var lat = place.geometry.location.lat();
    var lon = place.geometry.location.lng();
    
                var latlng = new google.maps.LatLng(lat, lon);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        var address = results[0].formatted_address;
                        var pin = results[0].address_components[results[0].address_components.length - 1].long_name;
                        var country = results[0].address_components[results[0].address_components.length - 2].long_name;
                        var state = results[0].address_components[results[0].address_components.length - 3].long_name;
                        var city = results[0].address_components[results[0].address_components.length - 4].long_name;
                        $("#elm_27 option:selected").text(country);
                        $("#elm_25 option:selected").text(state);
                        document.getElementById('elm_23').value = city;
                        document.getElementById('elm_29').value = pin;
                    }
                }
            });

    /**
    var city = place.address_components[3].long_name;
    var country = place.address_components[6].short_name;
    var state = place.address_components[4].short_name;
    var zip = place.address_components[7].long_name;
     
    $("#elm_23").val(city);
    $("#elm_27").val(country).change();
    $("#elm_25 option:selected").text(state);
    $("#elm_29").val(zip);
    */
    
});



});

推荐阅读