谷歌地图v3 API - 自动完成（地址）

Question

我想让我的谷歌地图应用程序实现自动完成功能。

以下是当前的代码：

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);

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

有什么想法吗？

提前感谢您。

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

Uncaught TypeError：无法读取未定义的“自动完成”属性

不确定为什么，在我的地图初始化函数中放置了代码。

编辑2：已修复。答案如下。

- Matt

---

你的修复版很好用！非常感谢。 - eifersucht

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

Answer 1

你的修复方法也对我有用。我正在使用 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=zh-CN#loading_the_library

- Hung Luu

---

奇怪，很有趣想知道为什么会发生这种情况。也许问题是由于和符号发送到浏览器的方式引起的。您是使用 PHP 还是 HTML 生成脚本的？使用的是哪个浏览器？ - Bryan Willis

这是一段时间以前的事情了，但我记得当时我使用了Rails erb模板来生成脚本。因此，生成的是HTML。 - Hung Luu

那不起作用是因为URL应该是sensor=false&libraries=places而不是你所拥有的sensor=false&libraries=places。&是HTML中的和号，而不是URL中的和号（因为在URL中它只是&）:)。 - Maverick

Answer 2

问题已解决。自动完成库实际上是一个独立的库，必须显式加载。以下一行代码解决了这个问题。

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

- Matt

Answer 3

由于这个问题对我有帮助，所以我想帮助在2019年遇到这个问题的人。 在2019年，您可以像这样添加Google地图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>

- Caleb

Answer 4

如果您正在使用Angular应用程序：

如果您正在使用Google Maps，则必须像这样在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", () => { ...

- Kesara Wimal

Answer 5

您需要将脚本属性添加“defer async”，就像这样：

：

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

- Mohammed Mukhtar

Answer 6

感谢Matt的回答！在使用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答案一致，但与官方文档不一致（除非在URL中提供key有所不同）。

- davke

Answer 7

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

- mayorvlf

Answer 8

我发现这个错误是因为我的API密钥已经超过了每日请求配额。

我刚刚创建了一个新的API密钥，用它替换了旧的密钥。

对我来说它有效了。

谢谢。

- vinayak surywanshi