谷歌地图放置自动完成加载事件
Posted
技术标签:
【中文标题】谷歌地图放置自动完成加载事件【英文标题】：Google maps places autocomplete loading events 【发布时间】：2014-08-04 19:35:36 【问题描述】：我正在使用Google Maps Places Autocomplete api。
我想在搜索过程中显示一个 Ajax 微调器，然后显示自动完成下拉菜单。
如何确定地点结果何时准备就绪？是否触发了一些事件？
这在互联网连接不佳时特别有用，因为延迟有时可能长达 5 秒。用户需要知道搜索框是一个自动完成的输入框，然后再疯狂地按回车进行搜索。
【问题讨论】：
您是否尝试过编写自己的控件而不是使用地理编码器服务自动完成？在键上（说一秒钟后进行地理编码，显示您的微调器，然后在地理编码完成时隐藏微调器并显示带有一些结果选项的列表。 @loangburger 我确实尝试过，自动完成功能稍微精简了一点，因为每个查询和选定的项目只会进行 1 个 http 调用。如果您使用 api 的 google 已公开，则需要不止一次调用来复制 api 提供的内容（包括有关您选择的坐标和信息）。 Google 也不会尽可能多地阻止您的请求。 嘿，回车搜索也是一个有效的操作，如果谷歌地图让我们这样做，你为什么不让你的用户这样做呢？看看这个demo，它也能做到：google-developers.appspot.com/maps/documentation/utils/geocoder 【参考方案1】：您可以使用自动完成服务来获取查询预测。它有一个回调函数。
在您提供的链接的示例中，您可以将 input 声明为脚本中的全局变量。并在 initialize 函数之后使用 autocomplete 服务 访问它：
var input;
function initialize ()
...
input = document.getElementById('pac-input');
...
function showSpinner()
document.getElementById('spinner').style.display = 'block';
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions( input: input , callback);
function callback(predictions, status)
if (status != google.maps.places.PlacesServiceStatus.OK)
document.getElementById('spinner').style.display = 'none';
return;
至于html文档的改动：
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location" onkeypress="showSpinner()">
<img id="spinner" src="spinner.gif" style="position:absolute; top:0; right:0; width: 250px; display: none">
</body>
我只会在超时一秒（即如果用户的互联网连接很慢）时运行它，否则微调器看起来像一个潜意识图像。
【讨论】：
以上是关于谷歌地图放置自动完成加载事件的主要内容，如果未能解决你的问题，请参考以下文章
使用咖啡脚本自动完成放置后无法从 getPlace 获取价值