类型错误： 无法设置空属性"值" 自动完成表单谷歌地图

Question

如果我填写我的输入字段"Adresse automatisch ausfüllen："我的路线并单击回车，所以我有一个js错误：

类型错误： 无法设置空的属性"值"

我已经尝试过... = null; 但我有同样的错误。

这是我的JS代码：

<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
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'
};
function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}
// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    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;
    }
  }
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
// [END region_geolocation]
    </script>

这是我的 HTML：

<div class="row">
    <div class="six columns">
        <div class="row">
            <div class="twelve columns">
                <div class="form-row field_text">
                    <label for="veranstaltungsgelaende" class="required">Adresse automatisch ausfüllen:</label><br>
                    <input onFocus="geolocate()" type="text"id="autocomplete" class="input_text">
                    Geben Sie hier die komplette Adresse ein: (z.B: Rathausstraße 61 52222 Stolberg )
                </div>
            </div>
            <div class="six columns b0">
                <div class="form-row field_text">
                    <label for="veranstaltungsgelaende" class="required">Veranstaltungsgelände Name*:</label><br>
                    <input type="text" id="veranstaltungsgelaende" name="veranstaltungsgelaende" class="input_text">
                </div>
                <div class="form-row field_text">
                    <label for="plz" class="required">PLZ *:</label><br>
                    <input type="text" id="plz" name="plz" class="input_text">
                </div>
            </div>
            <div class="six columns b0">
                <div class="form-row field_text">
                    <label for="strasse" class="required">Straße *:</label><br>
                    <input type="text" id="route" disabled="true" name="strasse" class="input_text">
                </div>
                <div class="form-row field_text">
                    <label for="ort" class="required">Ort *:</label><br>
                    <input type="text" id="ort" name="ort" class="input_text">
                </div>
            </div>
            <div class="twelve columns b0">
                <a href="#" class="btn btn_green right">Speichern und zur Übersicht</a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="six columns">
        Google Maps
    </div>
    <div class="clear"></div>
</div>

这是我的测试页面：

http://davis-design.de/marktadresse/veranstaltungsort-erstellen.html

我试试这个例子：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=de-DE

希望有人能帮助我。

Answer 1

您需要使用具有正确元素 id 的所有字段。或者为不需要元素设置隐藏字段

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
                                 disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
                                             disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
                                             disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
                                 id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
                                 disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
                                             id="country" disabled="true"></input></td>
  </tr>
</table>

Answer 2

对于像我这样面临类似问题的任何后来者，请在下面的部分中删除您不需要的代码。例如，如果您的表单中没有国家/地区部分，只需从下面的代码中删除country: 'long_name'即可。

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'
    };