45

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

这是当前代码：

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：已修复。下面回答。

4

8 回答 8

21

你的修复也对我有用。我正在使用 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

于 2012-11-01T23:14:09.513 回答
10

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&amp;sensor=false"></scr‌​ipt>
于 2017-05-27T15:33:15.327 回答
8

由于这个问题对我有帮助，我想我会帮助任何在 2019 年遇到此问题的人。在 2019 年，您添加谷歌地图 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>
于 2019-06-06T13:02:13.693 回答
5

如果您使用的是角度应用程序：

如果您使用的是谷歌地图，则必须像这样在 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", () => { ...
于 2018-08-17T13:17:44.890 回答
1

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

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
            async defer></script>
于 2016-11-29T12:31:19.413 回答
0

感谢马特的回答！不知何故，type="text/javascript"在<script>使用libraries=places.

不起作用：

<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 答案一致，并且与官方文档不一致（除非key在 url 中提供了差异）。

于 2016-04-01T10:24:28.340 回答
0

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

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

这个对我有用

谢谢你

于 2019-02-28T07:31:58.843 回答
0

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

于 2021-01-24T01:39:35.520 回答