forms - 类型错误 : cannot set property 'value' of null Autocomplete form google maps

Question

如果我填写输入字段“Adresse automatisch ausfüllen:”我的路线并单击 Enter，那么我会出现 js 错误:

TypeError: Cannot set property 'value' of null

我已经尝试过 ... = 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>