如何在Javascript中实现谷歌地图位置自动完成？答案

【问题标题】：How to implement google map places autocomplete in Javascript?如何在Javascript中实现谷歌地图位置自动完成？
【发布时间】：2021-09-17 22:55:36
【问题描述】：

我正在尝试在我的应用程序中实现google map place autocomplete api。我的代码如下-

<body>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=autoAddress&libraries=places"></script>

    <script type="text/javascript">
        function autoAddress() {
            console.log('here');
            var input = document.getElementById('auto-address');
            var autocomplete = new google.maps.places.Autocomplete(input);
            console.log(autocomplete);
        }

        google.maps.event.addDomListener(document.getElementById('auto-address'), 'keypress', autoAddress);

    </script>

<input class="form-control" name="address" id="auto-address" type="text" placeholder="Address Details etc.">

</body>

在用户按下输入字段中的每个字符后，我试图就按键事件的地址提供建议，如下图官方文档中的图像-

但我在控制台中遇到以下错误-

未被抓住（承诺）， message: "autoAddress 不是函数", 名称：“InvalidValueError”。

我应该怎么做才能解决这个问题？非常感谢您提供示例代码以供参考。

【问题讨论】：

1) 这不是自动完成小部件，这是搜索框小部件 2) official documentation 有一个完整且有效的示例。尽管我没有测试您的代码，但您显然遗漏了一些东西。也许async 属性？
@MrUpsidown 是正确的，执行顺序是问题所在。 script 标签上的 async 或 defer 属性可以解决这个问题。
@MrUpsidown 我尝试过使用自动完成和搜索框。还尝试了异步方法。当我使用异步时，我的控制台显示一个错误，它找不到任何像“google”这样的词。我还假设这个问题与#jpoehnelt 所说的执行顺序有关。但很抱歉，我仍然无法解决。
我也应该在实时服务器中进行测试吗？你们认为我在本地环境中测试时会发生错误吗？
为什么addDomListener 在输入？你不需要那个。而且您的脚本顺序错误。在可能被调用之前声明你的回调函数。此外，通过不使用异步和（或）将脚本放在 HTML 的其余部分之前，您可能会在加载该 DOM 元素之前调用document.getElementById('auto-address')。所有基本的东西。文档再次提供了一个非常简单且带有说明的工作示例。

标签： javascript html google-maps-api-3

【解决方案1】：

看来我找到了解决办法。问题出在一线-

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=autoAddress&libraries=places"></script>

我正在关注博客中的一个示例，我不记得它在哪里说使用回调函数作为请求参数。当我从脚本 src 中删除参数时，我不知道为什么，但它起作用了！

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>

如果有人能解释原因，那对我真的很有帮助。

【讨论】：

虽然这可能现在在您的代码中有效，但这与您应该做的相反。以正确的顺序加载脚本，回调将起作用。将脚本标签放在 HTML 的末尾。