Google Maps v3 API - 自动完成(地址)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Maps v3 API - 自动完成(地址)相关的知识,希望对你有一定的参考价值。
试图让我的谷歌地图应用程序自动完成工作。
这是当前的代码:
<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">
var input = document.getElementById('address');
var options = {
componentRestrictions: {country: 'au'}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
不幸的是,键入地址时没有任何反应
有任何想法吗?
提前致谢。
编辑:我实际上收到以下错误:
未捕获的TypeError:无法读取未定义的属性“autocomplete”
不知道为什么,代码放在我的map初始化函数中。
编辑2:固定。答案如下。
你的修复也适合我。我正在使用Geocomplete jQuery插件http://ubilabs.github.com/geocomplete/,他们主页上的说明说使用这个
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
但它对我没有用,并且得到了同样的错误。
请在此处查看Google Maps API的文档https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library
固定。自动完成库实际上是一个必须显式加载的独立库。以下行解决了这个问题。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
如果您使用角度应用程序:
如果您使用谷歌地图,您必须像这样导入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", () => { ...
谢谢马特的答案!不知何故,在使用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不一致(除非在url中提供key
有所不同)。
您必须在脚本属性中添加“延迟异步”,如下所示:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
我发现此错误是因为我的API密钥已超过此API的每日请求配额。
我只是创建新的API密钥并替换它而不是旧的。
这个对我有用
谢谢
以上是关于Google Maps v3 API - 自动完成(地址)的主要内容,如果未能解决你的问题,请参考以下文章
无法从 Google Maps Javascript API 的自动完成中选择地址
Google maps v3 在 jQuery mobile 和 PhoneGap 上具有自动完成功能
使用 Google Maps Javascript API V3 反向地理编码检索邮政编码