Question

尝试为我的Google地图应用程序自动完成工作。

以下是当前代码：

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

不幸的是，输入地址时没有任何反应。

有什么想法吗？

提前致谢。

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

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

不确定原因，代码放在我的地图初始化函数中。

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

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=en-EN#loading_the_library

Answer 2

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

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

Answer 3

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

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

Answer 4

谢谢马特的答案！不知何故，使用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 answer一致且与official documentation不一致（除非在网址中提供key有所不同）。

Answer 5

您必须添加＆＃39;推迟异步＆＃39;到脚本属性，如下所示：

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

Answer 6

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

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

对我有用

谢谢

Answer 7

因为这个问题对我有帮助，所以我认为我会帮助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>

Answer 8

就我而言，问题是通过将 Libraries=places 更改为 libraries=places 来解决的，它似乎区分大小写

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

8 个答案: