修改示例的不穩定結果

-1

我正在使用一個非常略微修改的API示例版本，我有一個名爲venueset（）的函數，我調用它來創建我想要的表單的輸入，問題是API doesn' t似乎總是加載。某些時候自動完成功能將起作用，而'自動完成'字段將按其應有的方式工作，其他時候'自動完成'字段將僅僅是沒有明顯API功能的普通文本框。如果有人能給我一點點的方向，爲什麼它有時會起作用，其他時候不會，我會非常感激。謝謝。修改示例的不穩定結果

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/util.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/controls.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/places_impl.js"></script> 
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/stats.js"></script> 
</head> 
    <body> 

    <?php 

     function venueset() 
     { 
      echo ' 
     <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter venue" onfocus="geolocate()" type="text" name="venue" autocomplete="off"> 
    </div> 

    <div id="address"> 
      <input type="hidden" class="field" name="name" id="business" disabled="true"> 
      <input type="hidden" class="field" name="number" id="street_number" disabled="true"> 
      <input type="hidden" class="field" name="street" id="route" disabled="true"> 
      <input type="hidden" class="field" name="city" id="locality" disabled="true"> 
      <input type="hidden" class="field" id="administrative_area_level_1" disabled="true"> 
      <input type="hidden" class="field" name="postcode" id="postal_code" disabled="true"> 
      <input type="hidden" class="field" name="country" id="country" disabled="true"> 
    </div> 
    '; 
    } 

    ?> 
    <!-- Replace the value of the key parameter with your own API key. --> 
    <script> 
     function initAutocomplete() { 
     var input = document.getElementById('autocomplete'); 
     var options = { 
      types: ['geocode', 'establishment'] 
     }; 
     autocomplete = new google.maps.places.Autocomplete(input, options); 

     autocomplete.addListener('place_changed', fillInAddress); 

     }; 

     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; 
     } 
     document.getElementById("business").value = place.name; 
     document.getElementById("business").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; 
      } 
     } 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;callback=initAutocomplete" async="" defer=""></script> 
     <script type="text/javascript"> 
      // 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' 
    }; 



    // 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> 
    </body></html> 
     </script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=api_key_removed&libraries=places&callback=initAutocomplete" 
      async defer></script> 
     </body> 
    </html>

來源

2017-02-15 Andrew

您沒有正確加載API。從該文檔中the documentation

描述你應該載入它：

下面的引導程序請求說明了如何請求Maps JavaScript API的於google.maps.geometry庫：
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"> 

您正在載入s單獨的API片段（例如， https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js），那將不可靠。

來源

2017-02-15 15:40:05 geocodezip

謝謝！似乎已經完成了這個訣竅。 – Andrew

修改示例的不穩定結果

回答

相關問題