Google Maps v3 API - 自动完成（地址）

Posted 2023-03-05

【中文标题】Google Maps v3 API - 自动完成（地址）

【英文标题】：Google Maps v3 API - Auto Complete (address)

【发布时间】：2012-08-09 07:13:58

【问题描述】：

尝试让我的谷歌地图应用程序自动完成工作。

这是当前代码：

html

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

javascript

    var input = document.getElementById('address');
    var options = 
        componentRestrictions: country: 'au'
    ;
    var autocomplete = new google.maps.places.Autocomplete(input, options);

很遗憾，输入地址时没有任何反应。

有什么想法吗？

提前致谢。

编辑：我实际上收到以下错误：

未捕获的类型错误：无法读取未定义的属性“自动完成”

不知道为什么，代码放在我的地图初始化函数中。

编辑 2：已修复。在下面回答。

【问题讨论】：

您的 Fix 版本运行良好！非常感谢。

你是不是只加载了这个脚本<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

【参考方案1】：

在我的情况下，问题是通过将 Libraries=places 更改为 library=places 来解决的，它似乎区分大小写

【参考方案2】：

由于这个问题对我有所帮助，我想我会帮助任何在 2019 年遇到此问题的人。 在 2019 年，您可以像这样添加 google maps api 导入：

https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY

然后将 &libraries=places 添加到末尾，使所有所说和所做的看起来像这样：

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

【参考方案3】：

我发现此错误是因为我的 API 密钥已超出此 API 的每日请求配额。

我只是创建新的 API 密钥并替换它而不是旧的。

对我有用

谢谢

【参考方案4】：

如果您使用的是 Angular 应用程序：

如果你使用谷歌地图，你必须像这样在 ngmodule 中导入 Api

@NgModule(
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot(
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    )
  ],
  providers: [...],
  bootstrap: [...]
)

需要库 'places' 才能使用自动完成模块。

比这样使用它：

import MapsAPILoader from "@agm/core";
...
constructor(private mapsAPILoader: MapsAPILoader,
...
    this.mapsAPILoader.load().then(() => 
      let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

      autocomplete.addListener("place_changed", () =>  ...

【参考方案5】：

已修复。自动完成库实际上是一个必须显式加载的单独库。下面一行解决了这个问题。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&sensor=false"></scr‌​ipt>

【参考方案6】：

您必须在脚本属性中添加“延迟异步”，如下所示：

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
            async defer></script>

【参考方案7】：

感谢马特的回答！不知何故，在使用libraries=places 时不要在<script> 标记上省略type="text/javascript" 属性似乎很重要。

不起作用：

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

作品：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

回调变体也有效（定义了 initMap 函数）：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>

这似乎与另一个SO answer 一致并且与official documentation 不一致（除非在网址中提供key 会有所不同）。

【参考方案8】：

您的修复也对我有用。我正在使用 Geocomplete jQuery 插件http://ubilabs.github.com/geocomplete/ 他们主页上的说明说要使用这个

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>

但它对我不起作用并且得到了同样的错误。

在此处查看 Google Maps API 的文档 https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

【讨论】：

奇怪的是，知道为什么会发生这种情况会很有趣。也许问题是由于将符号发送到浏览器的方式。您是使用 php 还是 html 来生成脚本？什么浏览器？

这是不久前的事，但我想我使用的是 Rails erb 模板来生成脚本。所以，HTML。

这不起作用，因为 URL 应该是 sensor=false&libraries=places 而不是 sensor=false&libraries=places 这就是你所拥有的。 & 是一个 html & 符号，而不是 URL 符号（因为在 url 中它只是 &）:)。