Question

我想在我的网页中实现一个包含全屏地图的搜索框。我点击了此链接https://developers.google.com/maps/documentation/javascript/examples/places-searchbox，并做了如下代码更改

我在标头中添加了这一行代码

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

和html

<div id="map-container2" class="">
 <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
 <div id="map" class="map2"></div>
</div>

并且我将此功能添加到了我的javascript

$(document).ready(function () {


    function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {

        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        alert(input);
        var searchBox = new google.maps.places.SearchBox(input);
        alert(searchBox);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        alert("1");

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function () {
            searchBox.setBounds(map.getBounds());
        });

    }

});

问题在于，尽管我在脚本标签中定义了callback=initAutocomplete，但它从未达到此功能。此功能永不调用的警报。我非常感谢您的帮助。谢谢

Answer 1

我收到带有发布代码（fiddle）的JavaScript错误"initAutocomplete is not a function"。 InitAutocomplete对于jquery ready函数运行的匿名函数而言是本地的，但从未在其中调用。

可以将该函数放在脚本加载器回调（fiddle）可以找到的范围内：

<div id="map-container2" class="">
  <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
  <div id="map" class="map2"></div>
</div>
<script>
  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {});

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    alert(input);
    var searchBox = new google.maps.places.SearchBox(input);
    alert(searchBox);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    alert("1");

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"></script>

或者从脚本include中删除&callback=initAutocomplete，只需在jquery ready函数中使用它，然后在其中调用（fiddle）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map-container2" class="">
  <input id="pac-input" class="controls" type="text" placeholder="Ville - Recherche">
  <div id="map" class="map2"></div>
</div>
<script>
  $(document).ready(function() {
    function initAutocomplete() {
      var map = new google.maps.Map(document.getElementById('map'), {

      });

      // Create the search box and link it to the UI element.
      var input = document.getElementById('pac-input');
      alert(input);
      var searchBox = new google.maps.places.SearchBox(input);
      alert(searchBox);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
      alert("1");

      // Bias the SearchBox results towards current map's viewport.
      map.addListener('bounds_changed', function() {
        searchBox.setBounds(map.getBounds());
      });

    }
    initAutocomplete();
  });
</script>

为什么initAutocomplete函数未在Google地图中找到搜索位置

1 个答案: