在子组件中使用SebM谷歌地图模块显示空白地图

时间:2017-02-06 12:05:24

标签: google-maps angular import angular2-google-maps

  编辑:我发现了问题。我当时正在使用ng2-boostrap tabset模块,   在此视图中添加地图时,地图不会渲染。一世   但是,我们无法解决这个问题。

我正在处理一个角度2应用程序,我需要将谷歌地图模块导入子模块。我的问题是 - 我怎么能正确地做到这一点?这是不可能的。

我尝试了什么:

我添加了import { AgmCoreModule } from 'angular2-google-maps/core';AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }),其中xxx是我从谷歌api网站下载的apiKey。如果我在一个新的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和地图中识别出选择器已加载,但地图显示一个空视图 - 即有一个地图与谷歌徽标和东西,但没有内容 - 没有错误消息。我使用与我的测试示例完全相同的代码。

我还尝试使用forRoot({apiKey:&#39; xxx&#39;})添加AgmCoreModule,结果相同。我从App.module中删除了导入,只导入了与MapModule相同的结果。

我在这里遗漏了什么吗?如果需要,我可以提供更多代码,但我认为我的问题在于缺乏进口知识。

亲切的问候克里斯

1 个答案:

答案 0 :(得分:0)

您是否尝试将此代码放入负责查看地图的组件中?

  import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
  @ViewChild(SebmGoogleMap) map: SebmGoogleMap;

  this.map.triggerResize();

如果地图未在初始视图中渲染,例如。在* ngif块内部然后出现问题。当您检查选项卡中的元素时,您是否看到地图代码,或者只有在激活地图选项卡时才会看到地图代码?

通常,当没有错误时,triggerResize()将解决您的问题。