如何打开和关闭谷歌地图自动完成功能？

Posted 2023-03-05

【中文标题】如何打开和关闭谷歌地图自动完成功能？

【英文标题】：How to toggle the google-maps autocomplete on and off?

【发布时间】：2012-04-07 09:39:33

【问题描述】：

我正在为 Google Maps API（第 3 级）实例化一个自动完成输入，如下所示：

var input = document.getElementById('szukanyAdres');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

如何在运行时开启和关闭自动补全功能？

【问题讨论】：

我不明白，您不想在您的网站上使用自动完成功能吗？那么，为什么不直接删除代码呢？

【参考方案1】：

我也遇到了这个问题（在我的应用程序中，我只想在用户在我的输入字段中输入至少 4 位数字时运行谷歌的自动完成功能 - 当输入的字符串少于 4 位数字时，我正在使用我的自定义智能搜索）。

在我的情况下，上述解决方案也不起作用，所以我的解决方法是：

根据需要将 opacity: 0 设置为 $('.pac-container')。 如果需要，还可以选择设置低 z-index。

【参考方案2】：

你可以尝试用 JQuery 隐藏它：

$(".pac-container").hide(); //hide autocomplete

【讨论】：

这不会每次都有效，因为 google 的 javascript 会再次显示它，即使您将更改或删除 DIV 的类。

【参考方案3】：

如果此处写的任何内容对您不起作用，您可以尝试隐藏它。 键入时出现位置的字段位于 css 类 .pac-container 中，因此只需在 css display: none 中声明它。然后在搜索框中输入时不会出现。其实这不是自定义的方式。

【参考方案4】：

删除所有添加到自动完成功能的侦听器。

autocomplete.unbindAll();

移除所有添加到输入元素的监听器。

google.maps.event.clearInstanceListeners(input);

见https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429

【讨论】：

天哪，是的，谢谢！在多个输入失败的情况下，花了几个小时尝试在谷歌位置和另一个 API 之间切换，这实际上解决了问题。禁用 Places 后，我们的其他服务正在显示建议，但尽管其他事件被禁用并且容器被隐藏，但谷歌仍在处理 keydown 并在输入中填充建议。

【参考方案5】：

Dr.Molle 的解决方案对我不起作用。

我找到的解决方案是 clearListener 并删除 pac-container：

var autocomplete;
var autocompleteListener;
function disableGoogleAutocomplete() 
    if (autocomplete !== undefined) 
            google.maps.event.removeListener(autocompleteListener);
            google.maps.event.clearInstanceListeners(autocomplete);
            $(".pac-container").remove();

            console.log('disable autocomplete to GOOGLE');
     

function enableGoogleAutocomplete() 
    autocomplete = new google.maps.places.Autocomplete($("#inputDiv input")[0], options);
    autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', function()  ... 
    console.log('set autocomplete to GOOGLE');

现在我可以打开/关闭 Google 地方自动完成功能。

【讨论】：

您确定这会在功能上禁用自动完成功能吗？视觉上它可以工作，但是当我注释掉 $('.pac-container').remove() 监听器/自动完成仍然处于活动状态。

是的，我用它在谷歌地图自动完成和我自己的数据之间切换。

为什么在这里使用google.maps.event.removeListener？你用google.maps.event.clearInstanceListeners就够了。

我不记得为什么了，但我认为使用这种方法不会禁用自动完成功能。需要测试。

它并没有完全禁用它：按键向上和向下按键仍有事件

【参考方案6】：

有两个与自动完成相关的元素

输入元素 包含列表条目的 div。此 div 将附加到主体并具有“pac-container”类

那么你可以做什么：通过修改它们的显示样式来显示或隐藏这两个元素。

---

当无法隐藏输入时，您可以将输入替换为输入的克隆，这将删除自动完成功能。

inputObject.parentNode.replaceChild(inputObject.cloneNode(true),input);

要恢复自动完成，请再次执行您想要执行的操作。

【讨论】：

在上面添加了另一个建议