Question

希望你能帮到我，但我也很擅长使用Google的Places API。

我还没有发布任何代码，因为我的代码工作正常，当我要描述的2个部分单独运行时。

除了使用Google提供的Javascript示例中的自动填充API之外，我还在使用Google的地方信息。

最初我的文档底部有以下脚本：

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

这个脚本位于我的文档顶部：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initAutocomplete&sensor=false"></script>

这让我觉得，“您已在此页面上多次添加Google Maps API。这可能会导致意外错误。”因此，在调查之后，我将这两者合并在一起：

InvalidValueError: initAutocomplete is not a function
TypeError: searchBox is undefined

但是，既然我已经这样做了，我收到以下错误：

{{1}}

当没有合并这些脚本时，我没有收到这些错误，但之后我意识到需要Places API的函数停止工作。如果我删除了自动填充API参考，则“地方信息”功能将起作用。

关于我如何能够将这两者结合起来，合并如图所示并解决“非功能”问题的任何想法？

如果您真的需要查看代码，请与我们联系。

提前致谢，斯蒂芬

Answer 1

您应该只使用一次包含脚本，例如：

//maps.googleapis.com/maps/api/js?key=__API-KEY__&libraries=places

请注意，您省略了＆＃39;回调＆＃39;包含脚本时的参数。然后在窗口加载时加载initAutocomplete，如：

google.maps.event.addDomListener(window, 'load', initAutocomplete);

也许你需要在头脑中包含gmaps脚本，否则你会得到谷歌未定义的＃39;错误，如果你将你的js内联。

Answer 2

只需尝试一下，发现删除asyc属性可以解决此问题。即使在Google API URL for Places上使用回调函数。

删除asyc属性是一个较小的解决方法。

Answer 3

Google地图自动填充API：未捕获的InvalidValueError：initAutocomplete不是函数

以下是我的代码：

   <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address" type="text"></input>
    </div>--This is the input field
    <script>-- This is Javascript

      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() {
            autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});
            autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {

        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }


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


      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>

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

InvalidValueError：initAutocomplete不是Google Places和Autocomplete API的功能

3 个答案: