Javascript Google Maps v3 API - 自动完成（地址）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11927849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 API - Auto Complete (address)
提问by Matt
Attempting to get auto complete working for my google maps application.
试图让我的谷歌地图应用程序自动完成工作。
Here is the current code:
这是当前的代码：
HTML
HTML
<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">
Javascript
Javascript
var input = document.getElementById('address');
var options = {
componentRestrictions: {country: 'au'}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
Unfortunately nothing happens when typing an address.
不幸的是，输入地址时没有任何反应。
Any ideas?
有任何想法吗？
Thanks in advance.
提前致谢。
Edit: I'm actually receiving the following error:
编辑：我实际上收到以下错误：
Uncaught TypeError: Cannot read property 'autocomplete' of undefined
未捕获的类型错误：无法读取未定义的属性“自动完成”
Not sure why, the code is placed in my map initialize function.
不知道为什么，代码放在我的地图初始化函数中。
Edit 2: Fixed. Answer below.
编辑2：固定。下面回答。
采纳答案by Matt
Fixed. The autocomplete library is actually a separate library that must be explicitly loaded. The following line solved the problem.
固定的。自动完成库实际上是一个必须显式加载的独立库。下面一行解决了这个问题。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places??&sensor=false"></scr??ipt>
回答by Hung Luu
Your fix worked for me too. I'm using the Geocomplete jQuery Plug-in http://ubilabs.github.com/geocomplete/and the instructions on their home page says to use this
你的修复也对我有用。我正在使用 Geocomplete jQuery 插件http://ubilabs.github.com/geocomplete/并且他们主页上的说明说使用这个
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
But it didn't work for me and was getting the same error.
但它对我不起作用，并且出现了同样的错误。
See documentation for Google Maps API here https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library
在此处查看 Google Maps API 的文档 https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library
回答by Caleb
Since this question helped me I figured I would help anyonewho is having this problem in 2019. In 2019 you add the google maps api import like this:
由于这个问题对我有帮助，我想我会帮助任何在 2019 年遇到此问题的人。在 2019 年，您添加了 google maps api 导入，如下所示：
https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY
Then add &libraries=places to the end so that all said and done it looks like this:
然后添加 &libraries=places 到最后，这样所有的说和做它看起来像这样：
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places">
</script>
回答by Kesara Wimal
if you are using angular app:
如果您使用的是 angular 应用程序：
If you are using google maps you have to import the Api in the ngmodule like this
如果您使用的是谷歌地图，则必须像这样在 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: [...]
})
the library 'places' is needed to use the autocomplete module.
使用自动完成模块需要库“places”。
Than use it like this:
比这样使用它：
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", () => { ...
回答by Mohammed Mukhtar
You have to add 'defer async' to the script attribute, like this:
您必须将“延迟异步”添加到脚本属性中，如下所示：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
回答by vinayak surywanshi
i found this error because of my API key have exceeded daily request quota for this API.
我发现此错误是因为我的 API 密钥已超过此 API 的每日请求配额。
i just create new API key and Replace it instead of old one.
我只是创建新的 API 密钥并替换它而不是旧的。
it works for me
这个对我有用
thank you
谢谢你
回答by davke
Thanks Matt for the answer! Somehow it seems to be important not to omit type="text/javascript"attribute on <script>tag when using libraries=places.
感谢马特的回答！不知怎的，这似乎是重要的是不能省略type="text/javascript"的属性<script>当使用标签libraries=places。
Doesn't work:
不起作用：
<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>
Works:
作品：
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
Callback variant also works (with initMap function defined):
回调变量也适用（定义了 initMap 函数）：
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>
This seems to be consistent with another SO answerand inconsistent with the official documentation(unless providing the keyin the url makes the difference).
