Question

我目前正在尝试创建一个可以找到用户所在位置的页面，然后使用Google Maps场所库来显示他们附近的医院。

此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是我希望带给我的应用程序的功能，任何帮助我将不胜感激。

Answer 1

就像你链接的codepen一样，脚本调用有一个参数来知道它将用于回调&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中做的一样。

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

1 个答案: