2017-02-06 11 views
2

EDIT: Я нашел проблему. Я использовал модуль tabs ng2-boostrap, при добавлении карт внутри этого вида, карта не отображает. I не смогли устранить проблему.Использование модуля карт google maps SebM в дочернем компоненте показывает пустую карту

Я работаю над приложениями с угловым 2, где мне нужно импортировать модуль карт Google в дополнительный модуль. Мой вопрос: как я могу это сделать правильно? это даже возможно, как есть.

Что я пробовал:

Я добавил import { AgmCoreModule } from 'angular2-google-maps/core'; и AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) где ххх мой apiKey загрузить с сайта апи Google. Если я запустил этот код в новом создаваемом угловым клипом приложении - загрузив модуль в 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 и т. д., но без содержимого - никаких сообщений об ошибках. Я использую тот же самый код, что и мой тестовый пример.

Я также попытался добавить AgmCoreModule с forRoot ({apiKey: 'xxx'}) с тем же результатом. Я удалил импорт из App.module и импортировал его только в MapModule с тем же результатом.

Я что-то пропустил? я могу предоставить больше кода, если это необходимо, но я думаю, что моя проблема заключается в отсутствии знаний об импорте.

С наилучшими пожеланиями Крис

ответ

0

ли Вы пробовали положить этот код в компоненте, который отвечает за просмотр карты?

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

    this.map.triggerResize(); 

если карта не отображается в исходном виде, например. внутри блока * ngif возникают проблемы. Когда вы проверяете элементы на вкладках, видите ли вы код карты или видите код карты, только когда активирована вкладка карты?

Обычно, когда ошибок нет, triggerResize() исправляет вашу проблему.

+0

Я добавил код, который вы написали на кнопку, и нажал его после полной загрузки, и он работает! теперь я добавлю его к последнему крючку жизненного цикла, чтобы увидеть, делает ли это «автоматическим» большое спасибо! – ChrisEenberg

+0

Я получаю эту проблему с новым пакетом @ agm/core, так как нам пришлось обновить из-за обновления Angular 5 –

 Смежные вопросы

  • Нет связанных вопросов^_^