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

正在尝试为我的谷歌地图应用程序自动完成工作

以下是当前代码：

HTML

不幸的是，键入地址时什么也没有发生

有什么想法吗

提前谢谢

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

未捕获的TypeError:无法读取未定义的属性“autocomplete”

不知道为什么，代码放在我的map initialize函数中

---

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

你的修复方法对我也有效。我正在使用Geocomplete jQuery插件 他们主页上的说明是使用这个

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

但这对我来说不起作用，并且得到了同样的错误

请参见此处的谷歌地图API文档

---

谢谢马特的回答！在使用

libraries=places

时，不忽略

标记上的

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函数）：

---

这似乎与另一个一致，与不一致（除非在url中提供

键造成差异）。
您必须在脚本属性中添加'defer async'，如下所示：

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

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", () => { ...

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

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

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

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

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

如果您使用的是谷歌地图，您必须像下面这样将Api导入NGM模块

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

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

我只是创建了一个新的API密钥并替换它，而不是旧的

它对我有用

谢谢你
因为这个问题帮助了我，我想我会在2019年帮助任何有这个问题的人。
2019年，您添加了谷歌地图api导入，如下所示：

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

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", () => { ...

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

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

然后将&libraries=places添加到末尾，使所说的和所做的看起来如下：

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

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", () => { ...

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

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


在我的例子中，问题是通过将Libraries=places更改为Libraries=places来解决的，它似乎区分大小写
您的修复版本工作正常！非常感谢。您是否只加载了此脚本
奇怪，了解为什么会发生这种情况会很有趣。问题可能是由于将安培表发送到浏览器的方式造成的。您是使用PHP还是html生成脚本的？什么浏览器？这是很久以前的事了，但我想我是在使用Rails erb模板生成脚本。所以，HTML。这不起作用，因为url应该是
sensor=false&libraries=places
not
sensor=false&；libraries=places
这就是您所拥有的<代码>&

是html符号，而不是URL符号（因为在URL中它只是

&

）：）。