Question

我正在尝试在文本字段中实现google places api的自动完成功能。这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
$(document).ready(function() { initialize(){

  var input = document.getElementById('location_input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        alert(place.geometry.location.lat());
        alert(place.geometry.location.lng());
    });
}
});
</script>

<form role="search" method="get" action="http://elearningwp.thimpress.com/">
   <span class="location_placeholder ml5">
       <i class="location arrow icon tiny pr2"></i>
       <input id="location_input" role="combobox" aria-labelledby="label_search_location"
                                           aria-expanded="true" aria-autocomplete="list" aria-owns="explore-location-suggest" 
                                           placeholder="Please type a location..." class="dark" style="width:280px;">
    </span>

     <input type="text" value="" name="s" id="s" placeholder="What do you want to learn today?" class="form-control courses-search-input" autocomplete="off">
     <input type="hidden" value="course" name="ref">
     <button type="submit" style="width:150px;margin-right: -90px; float: right;"><i class="fa fa-search">Search</i></button>
     <span class="widget-search-close"></span>
</form>

但代码似乎不起作用。如果我在一个单独的文件中尝试代码虽然它工作得很漂亮。这是代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
 google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        alert(place.geometry.location.lat());
        alert(place.geometry.location.lng());
    });
}

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

</script>
</head>
<body>
<input id="searchTextField" type="text" size="50">
<button id="btn" type="button">Submit</button>
</body>
</html>

您可以注意到，而不是在$(document).ready(function() { initialize(){使用google.maps.event.addDomListener(window, 'load', initialize);

以下是结果的快照：

有什么想法吗？

Answer 1

您的错误很常见。您可以在控制台中查看它：

这个错误意味着定义＆＃39;有点奇怪。匿名函数内的initialize函数没有声明。您的jQuery方法可能如下所示：

$(document).ready(function() { 

  var input = document.getElementById('location_input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        alert(place.geometry.location.lat());
        alert(place.geometry.location.lng());
    });

});

您的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
$(document).ready(function() { 

  var input = document.getElementById('location_input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
        alert(place.geometry.location.lat());
        alert(place.geometry.location.lng());
    });

});
</script>

<form role="search" method="get" action="http://elearningwp.thimpress.com/">
   <span class="location_placeholder ml5">
       <i class="location arrow icon tiny pr2"></i>
       <input id="location_input" role="combobox" aria-labelledby="label_search_location"
                                           aria-expanded="true" aria-autocomplete="list" aria-owns="explore-location-suggest" 
                                           placeholder="Please type a location..." class="dark" style="width:280px;">
    </span>

     <input type="text" value="" name="s" id="s" placeholder="What do you want to learn today?" class="form-control courses-search-input" autocomplete="off">
     <input type="hidden" value="course" name="ref">
     <button type="submit" style="width:150px;margin-right: -90px; float: right;"><i class="fa fa-search">Search</i></button>
     <span class="widget-search-close"></span>
</form>

谷歌api无法正常工作

1 个答案: