Angular-google-maps: 惰性地图API载入器错误

他@ravindranpandu ，

您是否可以在页面上的任何地方自行加载google maps脚本？

不，我只是将其导入到打字稿文件中，每次访问该页面时，脚本标签都会附加到链接到googlemap api的html上。

在上面的图片中，您可以看到googlemap脚本标签被附加了7次，这意味着我访问了该页面7次。

@ravindranpandu hmm，可以告诉我您的bootstrap()函数吗？

嗨@SebastianM ，

为了使创建我的示例应用程序更加容易，您可以在该离子应用程序中看到该问题。
https://github.com/ravindranpandu/angular-map

提前致谢

尝试多次访问地图页面，您将得到我所谈论的问题。

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

我不确定为什么会这样，请让我知道可能出了什么问题？

谢谢

@ravindranpandu这一行是原因：
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

在此位置添加ANGULAR2_GOOGLE_MAPS_PROVIDERS时，您将创建地图加载器的多个实例。

您必须在bootstrap（）方法中使用ANGULAR2_GOOGLE_MAPS_PROVIDERS。

@SebastianM我现在在主要app.ts提供程序中初始化了ANGULAR2_GOOGLE_MAPS_PROVIDERS，现在可以正常使用了，谢谢您的时间。

当我在功能模块而不是根应用程序模块中使用angular2-google-maps时，似乎也会发生这种情况。 有人可以确认吗？

在您的app.module.ts导入中添加：

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

（当然，您可以删除库：['places']）

然后在共享模块中添加：
在进口
AgmCoreModule
在出口方面：
AgmCoreModule

然后
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. 将消失

伙计们，有人知道现在我们如何处理延迟加载吗？
GOOGLE_MAPS_PROVIDERS已过时，我们改用AgmCoreModule ，每次加载模块时都会在每次API库加载。

@szykov在延迟加载的子模块中使用angular2组件的解决方案是执行@efstathiosntonas所说的

首先，在您的主要app.module.ts ，包含api

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

然后在您的子模块中，再次包含它但没有API密钥

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

现在，它将延迟加载angular2贴图组件，并且只请求一次javascript。 我使用webpack 2做到了这一点，并且工作正常。 谢谢你们在这里的出色工作。

@IAMtheIAM谢谢。 我对@efstathiosntonas的问候也🥇

如果您在索引文件中的某个地方或其他地方再次调用它，则必须将其删除。
您只需在项目中调用一次即可。

嗨，大家好，有人知道如何找到第二次包含地图的地方吗？
如果我访问的第一页有地图，则看不到它。 但是，如果我不首先访问带有地图的页面，那就可以了。
谢谢

如果没有代码示例， @ Riasets将很难为您提供帮助

回购链接： https :
不好意思的代码
@IAMtheIAM

登录名： [email protected]
密码：test1234

@Riasets我克隆并运行了您的应用程序，看起来非常好。 对我来说，登录后，地图立即加载，并且如果我切换到其他页面，地图也可以加载。 我没看到任何问题，您能再澄清一下吗？

@IAMtheIAM登录页面是第一页，地图页面是第二页。 在这种情况下，地图会加载。 但是，例如，如果您已经授权并尝试转到/ home页面，则不会加载地图。 或者尝试重新加载带有地图的页面，它也不会加载。 而且您还可以在dev tools 2上看到与Google Maps相同的脚本