谷歌地圖不使用ionic / angular2顯示

Question

我正在使用ionic2來顯示谷歌地圖。 但是當我運行下面的代碼時，我得到空白頁面。

export class NearByStoresPage {

  constructor(private nav: NavController, private confData: ConferenceData) {
    this.loadNearByOffers();
  }

  loadNearByOffers(){

    let options = {timeout: 10000, enableHighAccuracy: true};

    navigator.geolocation.getCurrentPosition(

        (position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);               

            let mapOptions = {
                center: latLng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            let map = new google.maps.Map(document.getElementById("map"), mapOptions);

            let marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              position: map.getCenter()
            });

            let content = "<h4>Information!</h4>";          

            let infoWindow = new google.maps.InfoWindow({
              content: content
            });

            google.maps.event.addListener(marker, 'click', function(){
              infoWindow.open(map, marker);
            });
        },

        (error) => {
            console.log(error);
        }, options

    );
  }
}

我將文件包含在index.html文件中，

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>

Html文件，

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Near By Offers</ion-title>
</ion-navbar>

<ion-content class="map-page">
  <div id="map"></div>
</ion-content>

但是下面的代碼工作正常，

this.confData.getMap().then(mapData => {
      let mapEle = document.getElementById('map');

      let map = new google.maps.Map(mapEle, {
        center: mapData.find(d => d.center),
        zoom: 16
      });

      mapData.forEach(markerData => {
        let infoWindow = new google.maps.InfoWindow({
          content: `<h5>${markerData.name}</h5>`
        });

        let marker = new google.maps.Marker({
          position: markerData,
          map: map,
          title: markerData.name
        });

        marker.addListener('click', () => {
          infoWindow.open(map, marker);
        });
      });

      google.maps.event.addListenerOnce(map, 'idle', () => {
        mapEle.classList.add('show-map');
      });

    });

Answer 1

為地圖添加寬度和高度DIV：

<div id="map" style="width:800px;height:600px"></div>

也是這一行

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>

需要指定回調函數

Answer 2

我認為問題是因為你正在調用this.loadNearByOffers(); 構造函數中的方法。 該方法然后嘗試通過從DOM獲取元素來加載地圖

document.getElementById("map")

但是當你的構造函數被執行時，DOM中的那個元素還不存在，這就是為什么地圖沒有正確加載的原因。

我不知道您在項目中使用的是哪個版本的Ionic，但是您可以使用其中一個頁面事件（如ionViewDidEnter來確保在DOM元素可用之后將執行代碼（並且將初始化地圖） 。

ionViewDidEnter(){
  // the html of the page is now available
  this.loadNearByOffers();
}

你可以在這里找到一個工作的plunker。

Answer 3

嘗試調用方法loadNearByOffers（），如下所示。

ionViewLoaded(){
   this.platform.ready().then(() => {
   this.loadNearByOffers();
   }
}

應該在設備就緒事件上加載地圖。