个人中心
gpt4 book ai didi

javascript - Google 认为 api 无法正常工作

转载 作者：行者123 更新时间：2023-12-03 03:35:12 28 4
gpt4 key购买 nike

我正在尝试在文本字段中实现 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>

正如您所注意到的，我在这里使用的是 google.maps.event.addDomListener(window, '加载'，初始化)；

这是结果的快照:

enter image description here

有什么想法吗？

最佳答案

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

enter image description here

这个错误意味着在没有声明的情况下在匿名函数中“定义”初始化函数有点奇怪。您的 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>

关于javascript - Google 认为 api 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45895207/

28 4 0
文章推荐： javascript - TypeError : google. 映射。标记不是构造函数
文章推荐： javascript - javascript中的动画，如何一颗一颗发射子弹？
文章推荐： javascript - 使用Unityscript读取鼠标点击Input.GetMouseDown
文章推荐： javascript - 使用序列化方法将tinyMCE文本区域提交到数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com