修改示例的不稳定结果答案

【问题标题】：Erratic results with modified example修改示例的不稳定结果
【发布时间】：2017-02-15 15:02:43
【问题描述】：

我正在使用 API 示例的略微修改版本，我有一个名为venueset() 的函数，我调用它来为我的表单创建我想要的输入，问题是 API 似乎并不总是加载.有时自动完成功能会起作用，并且“自动完成”字段会按预期工作，而有时“自动完成”字段将只是一个没有明显 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>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-places-api google-places

【解决方案1】：

您没有正确加载 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">

您目前正在单独加载 API 的子部分（例如 https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/en_gb/common.js），这不可靠。

【讨论】：