使用地点自动完成 API 获取地址组件

Question

我正在尝试创建一个使用 Google 自动完成 API 的表单，以便在他们单击机构名称后填充一堆文本字段。我对 Javascript 不是很熟悉，所以这个对我来说有点困难。

照原样，我目前正在获取它以将名称填充到输入框中以及纬度和经度。但是其他所有内容（地址、地址 2、城市、州）都会填充“未定义”。关于如何将这些值填充到这些输入字段中的任何想法。

<html>
<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API&libraries=places"></script>
    <script>
        function initialize() {
          var input = document.getElementById('searchTextField');
          const options = {
          componentRestrictions: { country: "us" },
          fields: ["address_components", "geometry", "icon", "name"],
          strictBounds: false,
          types: ["establishment"],
          };
          var autocomplete = new google.maps.places.Autocomplete(input, options);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('locationName').value = place.name;
                document.getElementById('addr').value = place.adr_address;
                document.getElementById('addr2').value = place.address2;
                document.getElementById('city').value = place.city;
                document.getElementById('state').value = place.state;
                document.getElementById('lat').value = place.geometry.location.lat();
                document.getElementById('long').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />

    <input type="text" id="locationName" name="locationName" />
    <input type="text" id="addr" name="addr" />
    <input type="text" id="addr2" name="addr2" />
    <input type="text" id="city" name="city" />
    <input type="text" id="state" name="state" />
    <input type="hidden" id="lat" name="lat" />
    <input type="hidden" id="long" name="long" />

</body>
</html>

Answer 1

我已经弄明白了，以防有人在路上寻找答案。

我使用了 console.log(place) 并且能够弄清楚我试图错误地访问 address_components 对象。例如，城市信息将通过 place.address_components[4].long_name.

访问

整体修复非常简单。

使用地点自动完成 API 获取地址组件

Using Place Autocomplete API to get Address Components

javascript

autocomplete