Блог

У меня возникли некоторые проблемы с API JavaScript Google Maps, используемым в моем приложении ionic 2. При первом отображении карты на странице она будет отображаться нормально — см. Первый снимок экрана. После перехода назад и повторного открытия страницы с картой Google карта больше не будет отображаться корректно. Вместо этого я просто получаю серую область — см. Второй снимок экрана.

Я уже искал эту проблему, но, насколько я знаю, ни у кого еще не было решения (тема с той же темой здесь)

Может быть, кто-нибудь еще может мне здесь помочь?

Я также создал репозиторий github, который можно легко клонировать и запускать, чтобы вы могли воспроизвести проблему. Пожалуйста, обратите внимание, что ionic 2 должен быть запущен и запущен, если вы хотите попробовать это.

Заранее спасибо!

Ну, я наконец-то нашел обходной путь. Взгляните на сообщение ddellamico в этой теме. Вам необходимо запускать событие изменения размера объекта Google Maps каждый раз, когда вы заходите на определенную страницу. Поэтому поместите следующий код в событие ionViewDidEnter().

 // this.map refers to the google maps object created via 'new google.maps.Map(...)'
google.maps.event.trigger(this.map, 'resize');
  

Убедитесь, что вы используете событие ввода ionViewDid() вместо события загрузки ionViewDid().

Если вы хотите, чтобы карта снова центрировалась в определенной точке или маркере, вам следует дополнительно выполнить следующее:

 // Longitude and latitude are just examples
// Of course longitude and latide should refer to your specific point the map should center on
this.map.setCenter(new google.maps.LatLng(47.0712025, 15.4382784));