代码之家 › 专栏 › 技术社区 › neda Derakhshesh

为什么initAutocomplete函数没有在google地图中找到搜索位置

google-maps html jquery javascript

-1

neda Derakhshesh · 技术社区 · 7 年前

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>

<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 在脚本标记中,但它从未命中此函数。此函数中的警报从不调用。我真的很感谢你的帮助。非常感谢。

1 回复 | 直到 7 年前

geocodezip 7 年前

"initAutocomplete is not a function" 用张贴的代码( fiddle 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>

&callback=initAutocomplete 从脚本include中,只需在jquery中使用它 准备好的 函数,并在那里调用它( 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>