javascript - 连接对象中的两个值

Question

我正在构建一个地点自动完成地址表单，就像此处看到的演示 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

但是在演示中，街道号码和街道名称被放入单独的字段中。我想要做的是将 street_number: 'short_name' 和 route: 'long_name' 这两个值连接起来，并将它们放入一个新字段中。

我试图找到代码中这些值的存储位置，我看到了这个数组

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

因此，如果我执行 console.log(componentForm); 它会返回整个内容。所以我尝试了 console.log(componentForm[route]); 但控制台显示 route is undefined

所以我的问题是，如何找到街道号码和街道名称的值，然后将它们连接到表单中的新字段中？

发布我的完整脚本代码，因为它略有修改(我删除了地理编码服务和仅限于美国地址的建议，并且还添加了州县作为返回值之一)

// load google api
var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_code: 'short_name'
};

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to US locations
    var input = document.getElementById('autocomplete');
    var options = {
        componentRestrictions: {
            country: 'us'
        }
    };

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

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

function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        $(".autoSearch").hide(1000);
        $(".hiddenForm").show(1000);
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];

        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];

            document.getElementById(addressType).value = val;

        }
    }
}

Answer 1

当您编写componentForm[route]时，javascript将查找route变量并使用其内容作为componentForm对象的属性名称，没有route变量，因此javascript告诉您:它是未定义的。

如果您想访问路由属性，您应该执行此 componentForm["route"] 或此 componentForm.route ，要创建此新字段，您应该添加一个像这样的行:

componentForm.full_address = componentForm.route + " " + componentForm.street_number;