Google Places API不起作用
[英]Google places api not working
问题描述
我正在尝试在文本字段中实现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);
这是结果的快照：
有任何想法吗？
1 个解决方案
解决方案1
1 已采纳 2017-08-26 14:27:49
您的错误很常见。 您可以在控制台中检查它：
此错误意味着在不声明的情况下“定义”匿名函数内部的初始化函数有点奇怪。 您的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>
自动完成使用Google Maps Places API； API不起作用
[英]Using Google Maps Places API in autocomplete; API not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.