在子组件中使用 SebM google 地图模块显示空白地图
Using SebM google maps module in child component shows blank map
EDIT: I found the problem. I was using ng2-boostrap tabset module,
when adding the maps inside this view, the map does not render. I
haven't been able to fix the problem though.
我正在开发 angular 2 应用程序,我需要将 google 地图模块导入子模块。我的问题是 - 我怎样才能正确地做到这一点?这甚至可能吗?
我尝试过的:
我添加了 import { AgmCoreModule } from 'angular2-google-maps/core';
和 AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] })
,其中 xxx 是我从 google api 站点下载的 api密钥。如果我 运行 在新 angular-cli 创建的应用程序中使用此代码 - 将模块加载到 app.module,一切正常。选择器代码看起来:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
但是,我想在一个名为 MapModule 的模块中使用它,并将该模块导入我的 app.module,所以我将 AgmCoreModule 导入 MapModule,没有 forRoot(),选择器在html 并且地图已加载,但地图显示空视图 - 即有一张带有 google 徽标和内容的地图,但没有内容 - 没有错误消息。我使用与我的测试示例完全相同的代码。
我还尝试添加带有 forRoot({apiKey: 'xxx'}) 的 AgmCoreModule,结果相同。我从 App.module 中删除了导入,只导入到 MapModule 中,结果相同。
我在这里遗漏了什么吗?如果需要我可以提供更多代码,但我认为我的问题在于缺乏导入知识。
亲切的问候克里斯
您是否尝试过将此代码放入负责查看地图的组件中?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
@ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
如果地图未在初始视图中呈现,例如。在 *ngif 块内,就会出现问题。当您检查选项卡中的元素时,您看到的是地图代码,还是仅在激活地图选项卡时才看到地图代码?
通常在没有错误的情况下,triggerResize() 会解决您的问题。
EDIT: I found the problem. I was using ng2-boostrap tabset module, when adding the maps inside this view, the map does not render. I haven't been able to fix the problem though.
我正在开发 angular 2 应用程序,我需要将 google 地图模块导入子模块。我的问题是 - 我怎样才能正确地做到这一点?这甚至可能吗?
我尝试过的:
我添加了 import { AgmCoreModule } from 'angular2-google-maps/core';
和 AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] })
,其中 xxx 是我从 google api 站点下载的 api密钥。如果我 运行 在新 angular-cli 创建的应用程序中使用此代码 - 将模块加载到 app.module,一切正常。选择器代码看起来:
<sebm-google-map [latitude]="lat" [longitude]="lng">
<sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
</sebm-google-map-marker>
</sebm-google-map>
但是,我想在一个名为 MapModule 的模块中使用它,并将该模块导入我的 app.module,所以我将 AgmCoreModule 导入 MapModule,没有 forRoot(),选择器在html 并且地图已加载,但地图显示空视图 - 即有一张带有 google 徽标和内容的地图,但没有内容 - 没有错误消息。我使用与我的测试示例完全相同的代码。
我还尝试添加带有 forRoot({apiKey: 'xxx'}) 的 AgmCoreModule,结果相同。我从 App.module 中删除了导入,只导入到 MapModule 中,结果相同。
我在这里遗漏了什么吗?如果需要我可以提供更多代码,但我认为我的问题在于缺乏导入知识。
亲切的问候克里斯
您是否尝试过将此代码放入负责查看地图的组件中?
import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
@ViewChild(SebmGoogleMap) map: SebmGoogleMap;
this.map.triggerResize();
如果地图未在初始视图中呈现,例如。在 *ngif 块内,就会出现问题。当您检查选项卡中的元素时,您看到的是地图代码,还是仅在激活地图选项卡时才看到地图代码?
通常在没有错误的情况下,triggerResize() 会解决您的问题。