[英]Using Google Maps Places API in autocomplete; API not working
我正在尝试将Google Maps Places API连接到搜索框。 为了测试jquery的自动完成功能,我使用以下简单示例进行了测试:
function bindAutocomplete() {
var locationSearch = $("input#Location");
locationSearch.autocomplete({
source: ["Massachusetts", "New Hampshire", "Boston"],
minLength: 2
});
}
我试图弄清楚如何使用google maps API的结果作为源,但是我不确定该怎么做。 我可以从浏览器中的API获取结果:
https://maps.googleapis.com/maps/api/place/autocomplete/xml?types=(regions)&input=mas&key=xxx
这些是我尝试过的事情:
locationSearch.autocomplete({
source: function (request, response) {
$.getJSON("https://maps.googleapis.com/maps/api/place/autocomplete/json?types=(regions)&key=xxx&input=mass", {
term: "mass"
}, response),
minLength: 2
});
但出现“访问控制允许来源”安全错误。 我试着像这样做jsonp:
locationSearch.autocomplete({
source: function (request, response) {
$.ajax({
url: "https://maps.googleapis.com/maps/api/place/autocomplete/json?types=(regions)&key=xxx&input=mass",
type: "GET",
dataType: 'jsonp',
cache: false,
success: function (response) {
console.log(response);
}
});
},
minLength: 2
});
但是尝试记录响应时出现错误,因为响应是json,但是期望jsonp。 (此外,即使这确实可行,我也不确定如何将ajax调用的输出设置为源)
我尝试的最后一件事是:
locationSearch.autocomplete({
source: new google.maps.places.Autocomplete("mass"),
minLength: 2
});
这些脚本在我的页面上:
<script src='http://maps.googleapis.com/maps/api/js?libraries=places&key=xxx'></script>
<script>$(bindAutocomplete)</script>
但是当页面加载时,我收到错误“未定义Google”,以及一堆错误,指出“由于主线程上的XMLHttpRequest对最终用户的体验有不利影响而已弃用XMLHttpRequest”和“无法执行'write ''在'Document'上:除非已明确打开,否则无法从异步加载的外部脚本写入文档”
当您想通过JS请求这些数据时,必须使用Places-library的AutocompleteService
采样implemetation:
function bindAutocomplete() { var acService = new google.maps.places.AutocompleteService(), placesService = new google.maps.places.PlacesService(document.createElement('div')); $("input#location").autocomplete({ source: function(req, resp) { acService.getPlacePredictions({ input: req.term, types:['(regions)'] }, function(places, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { var _places = []; for (var i = 0; i < places.length; ++i) { _places.push({ id: places[i].place_id, value: places[i].description, label: places[i].description }); } resp(_places); } }); }, select: function(e, o) { placesService.getDetails({ placeId: o.item.id }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { alert(o.item.value + '\\n is located at \\n ' + place.geometry.location.toUrlValue()); } }); } }); } $(window).load(bindAutocomplete);
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script> <input id="location" />
注意:此服务不支持类型过滤器
但是:places-library还包含自动完成功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.