如何使用 .geocomplete 减少对 GoogleMaps API 的请求数量

Posted 2023-02-23

【中文标题】如何使用 .geocomplete 减少对 GoogleMaps API 的请求数量

【英文标题】：How can I reduce request quantity to GoogleMaps API with .geocomplete

【发布时间】：2019-06-04 16:50:45

【问题描述】：

我的网页上有带有“geocomplete”的文本输入。每个 keyPress 事件都会向 GoogleMaps API 发送请求。我想改变这种行为，即每 3 个字符（而不是每个字母）发送请求或在请求之前设置延迟。

我尝试使用 geocode:beforegeocomelete_search 事件，但它不起作用。

$("input").geocomplete()
                .bind("geocode:beforegeocomelete_search", function(event, results)
                    if ( $("input").val().length < 4) 
                        throw "At least 3 characters required for request sending";
                    
                );

你对这件事有什么想法吗？

【参考方案1】：

不确定您使用的是哪个版本的 geocomplete。 https://github.com/ubilabs/geocomplete/ 的版本有一个trigger()，当input 满足length 要求时，您可以调用它。

注意：由于某种原因，外部库似乎没有加载到 sn-p 中。

let geo = $('.geocomplete');

geo.geocomplete();
geo.on('input', function() 
  let el = $(this);
  
  if (el.val().length > 3) 
    el.trigger("geocode");
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/ubilabs/geocomplete/master/jquery.geocomplete.min.js"></script>
<input class="geocomplete" />

【讨论】：

不幸的是，这不起作用。此外，脚本在 el.val().length > 3 时发送两个请求。我认为 geocoplete 处理另一个事件（不是'输入'），我试图处理'keypress'、'keyup'和其他键盘事件（和多个事件），但这没有预期的效果。也许有人知道 geocomplete 处理哪个事件？

@AntonLifanov 由于 sn-p 不会加载外部库，我无法很好地测试它。可能值得尝试 jsfiddle、plnkr、codepen 等。Chrome 开发工具、检查元素、事件侦听器选项卡可以帮助我们查看发送第二个请求的事件。