谷歌地圖自動補全API

Question

我正試圖將谷歌地圖自動補全API嵌入到我的項目中。 我做了一切就像它是在文檔中寫的，但它返回我這個錯誤：未捕獲InvalidValueError：initAutocomplete不是一個函數。有時，當我重新加載頁面3次時，它終於起作用了，這很奇怪... 有人知道問題可能來自哪裏嗎？ 這裏是哪裏是我做的測試鏈接：http://www.dubair.ie/en/maps

這裏是頁面（鏈接到關鍵腳本是這是一個其他的文件頭）的代碼：

{% extends "PlatformBundle::body.html.twig" %} 

{% block content %} 

    <div id="locationField" class="form-group col-xs-12"> 
     <textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea> 
    </div> 

    <div id="details" class="hidden"> 
     <input disabled id="street_number"/> 
     <input disabled id="route"/> 
     <input disabled id="locality"/> 
     <input disabled id="postal_code"/> 
     <input disabled id="country"/> 
    </div> 

    <script> 
     // This example displays an address form, using the autocomplete feature 
     // of the Google Places API to help users fill in the information. 

     // This example requires the Places library. Include the libraries=places 
     // parameter when you first load the API. For example: 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 

     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 initAutocomplete() { 
      // Create the autocomplete object, restricting the search to geographical 
      // location types. 
      autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
        {types: ['geocode'], componentRestrictions: {country: 'ie'}}); 

      // 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(); 

      $('#details').removeClass('hidden').hide().slideDown('slow'); 

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

     // 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 = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 
        var circle = new google.maps.Circle({ 
         center: geolocation, 
         radius: position.coords.accuracy 
        }); 
        autocomplete.setBounds(circle.getBounds()); 
       }); 
      } 
     } 
    </script> 

{% endblock %} 

謝謝你的幫助

Answer 1

我認爲這是因爲您在頭文件中調用了API，但在HTML文檔的主體中有initAutocomplete函數。有時候身體還沒有裝，有時候是這樣。

只是把這個代碼：

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

權利之前</body>標籤（從頭部取下）。所以這將是HTML文檔正文中的最後一個元素。加載API時，這種方式initAutocomplete應始終可用。

Answer 2

我想知道你是如何得到這個錯誤的，我也想知道它有時會如何工作。

我得到這個錯誤：InvalidValueError：您可以使用一個<textarea>，但API需要<input>

更換：

<textarea id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"></textarea> 

不HTMLInputElement

錯誤應該明確的一個實例

與

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" autofocus class="form-control"/>