谷歌地图放置自动完成加载事件答案

【问题标题】：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

标签： javascript google-maps autocomplete google-places-api

【解决方案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>

我只会在超时一秒（即如果用户的互联网连接很慢）时运行它，否则微调器看起来像一个潜意识图像。

【讨论】：