2016-11-16 16 views
2

Я использую карты ионной 2 (бета-11) и Google. У меня есть страница, которая отлично работает, и отображает карту, как ожидалось.Ионный 2 с Google Maps

Для доступа к этой странице я нажимаю на элемент, и страница загружается через this.nav.push(MapPage, {. Как вы можете видеть карту нагрузки:

enter image description here

Однако, когда я иду на другой уровень, и делать this.nav.push(MapPage, { снова (отображение той же странице), отображается страница, но карта выглядит следующим образом:

enter image description here

Так уже плавал с одной страницы на ту же страницу, но второй раз карта не видна.

Вот мой код:

HTML

<ion-card id="map" class="job-map"></ion-card> 

map.ts

load(bounds: google.maps.LatLngBounds): void { 
    let mapOptions = { 
     center: bounds.getCenter(), 
     zoom: 15, 
     maxZoom: 15, 
     minZoom: 1, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var htmlElement: HTMLElement = document.getElementById("map"); 
    this.map = new google.maps.Map(htmlElement, mapOptions); 
    this.map.fitBounds(bounds); 
    this.ref.markForCheck(); 
    this.mapLoading = false; 
    } 

Если кто-то может предложить какие-либо предложения, я был бы признателен за это.

+0

Это потому, что в стеке есть две страницы, и обе страницы имеют один и тот же элемент с идентификатором «карта», и он применяется только к первому? – Richard

ответ

2

Проблема была в том, что в стеке было две страницы с одинаковым идентификатором элемента «карта». Если я даю каждой странице уникальный идентификатор, он работает.

+0

У меня такая же проблема, и как вы назначили «страницу уникального идентификатора»? # ionic2 Если возможно, добавьте ответ (ответ) в свой ответ. – RajeshKdev

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