使用 Angular 2 Google Maps Places 加载附近的医院答案

【问题标题】：Using Angular 2 Google Maps Places to load nearby hospitals使用 Angular 2 Google Maps Places 加载附近的医院
【发布时间】：2018-02-23 16:30:16
【问题描述】：

我目前正在尝试创建一个页面来定位用户所在的位置，然后使用 Google 地图地点库来显示他们附近的医院。

这个Codepen 是我在加载页面时想要显示的完美示例。但是实现该代码并没有在我的 Angular/Ionic 应用程序中有效地工作。

首先我使用

加载谷歌地图库

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

然后在组件内部，我创建了一个ngOnInit()，它将运行在 codepen 中找到的 javascript。除了在函数的末尾，我添加了initMap() 以便它初始化地图，因为在 Codepen 中它是脚本的回调。

其次，我试图让它与 Angular Google Maps 一起工作，但又无法让它工作。当我试图让它与 AGM 一起工作时，我在尝试转到地图所在的页面时收到以下错误：

Error: Uncaught (in promise): Error: Cannot find control with unspecified 
name attribute
Error: Cannot find control with unspecified name attribute
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1738)
at FormControlDirective.ngOnChanges (forms.es5.js:4520)
at checkAndUpdateDirectiveInline (core.es5.js:10812)
at checkAndUpdateNodeInline (core.es5.js:12238)
at checkAndUpdateNode (core.es5.js:12177)
at debugCheckAndUpdateNode (core.es5.js:12880)
at debugCheckDirectivesFn (core.es5.js:12821)
at Object.eval [as updateDirectives] (MapPage.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1738)
at FormControlDirective.ngOnChanges (forms.es5.js:4520)
at checkAndUpdateDirectiveInline (core.es5.js:10812)
at checkAndUpdateNodeInline (core.es5.js:12238)
at checkAndUpdateNode (core.es5.js:12177)
at debugCheckAndUpdateNode (core.es5.js:12880)
at debugCheckDirectivesFn (core.es5.js:12821)
at Object.eval [as updateDirectives] (MapPage.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:322)
at NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4149)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3

但我不完全确定这个问题是否与 AGM 有关，因为在一两秒后，出现了一个引用错误并说 ReferenceError: google is not defined。我早些时候收到了这个错误，我运行了命令npm install --save @types/googlemaps 来下载谷歌的打字，但即使我这样做了，仍然收到这个错误。

重申一下，我正在尝试使用 Google Maps Places 加载用户附近的医院，但无法使用 Angular 进行此操作，但上面链接的 Codepen 是我希望为我的应用程序带来的功能，任何帮助将不胜感激。

【问题讨论】：

标签： angular google-maps ionic-framework

【解决方案1】：

就像您链接的代码笔一样，脚本调用有一个参数来知道它将使用哪个函数来回调&callback=initMap：

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

您收到ReferenceError: google is not defined 是因为该脚本是异步调用的，并且您的 initMap() 在脚本加载之前被提前调用。因此，只需执行与 codepen 中相同的操作即可。

【讨论】：