您的位置: 首页  >  技术问答  >  使用Angular 2谷歌地图地方加载附近的医院

使用Angular 2谷歌地图地方加载附近的医院

分类: 技术问答 • 2022-05-17 14:01:58
问题描述：

我目前正在尝试创建一个页面，该页面可以找到用户所在的位置，然后使用Google地图位置库显示他们附近的医院。使用Angular 2谷歌地图地方加载附近的医院

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

答

就像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中做的一样。

相关推荐