google 仅放置带有重音编号的自动完成建议

Question

我正在使用 google api places 来获取地址自动完成建议。这是我的简单工作代码：

<!DOCTYPE html>
<html>
<body>

<form>
   <input id="customerAddress" name="customerAddress" required autocomplete="off" />
   <input id="zip" name="zip" required readonly />
   <input id="city" name="city" required readonly />
</form>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initAutocomplete&libraries=places"
      async
    ></script>
    
    <script>

        let autocomplete;
        
        function initAutocomplete() {
         
          autocomplete = new google.maps.places.Autocomplete(document.querySelector("#customerAddress"), {
            componentRestrictions: { country: ["de", "DE"] },
            fields: ["address_components", "geometry"],
            types: ["address"],
          });
          autocomplete.addListener("place_changed", fillInAddress);
        }
        
        function fillInAddress() {
          
          const place = autocomplete.getPlace();
          var address = ""
          var streetNumber = ""
        
          
          for (const component of place.address_components) {
            const componentType = component.types[0];
            
            switch (componentType) {

              case "route": {
                address = component.long_name;
                break;
              }
              
              case "street_number": {
                  streetNumber = component.long_name
                  break;
                }
        
              case "postal_code": {
                document.querySelector("#zip").value = component.long_name;
                break;
              }
        

              case "locality":
                document.querySelector("#city").value = component.long_name;
                break;

            }
          }
        
        document.querySelector("#customerAddress").value = address +" "+streetNumber
                  
          
        }
    </script>
  </body>
</html>

现在我会意识到以下情况：

客户应将其地址写入“customerAddress”字段以获得建议，但地址必须包含街道号码。我该如何限制它？
如果客户从自动完成列表中选择了建议，则只能提交表单。如果他/她手动写了一个地址，而不是来自自动完成列表，那一定是一个错误

Answer 1

好吧，我认为最好的解决方案是有单独的隐藏输入，您可以在其中放置您要运行验证的选定地址，如果未定义，您只会 return 错误。

至于有门牌号码，您还可以运行验证所选地点。如果它选择了类型 street_number 它是有效的，如果不是它则不是。

我不确定您是否可以禁用 Google 以将搜索结果限制为仅包含街道号码的地址。

google 仅放置带有重音编号的自动完成建议

google places automplete only suggestions with stress number

javascript

html

jquery

google-places-api

react-google-places-autocomplete