为什么地图康瓦斯没有出现在 Ionic 2 的幻灯片中

Question

在此代码中，我想在第二张幻灯片上加载map，但在第二张幻灯片中Slide地图convas没有出现

<ion-content>
  <ion-slides>
  <ion-slide>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>{{Origin}}</ion-label>
      </ion-item>
    </ion-col>
    </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label> {{Target}} </ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-40>
      <ion-item>
        <ion-label>{{name}} </ion-label>
      </ion-item>
    </ion-col>
    <ion-col width-50>
      <ion-item>
        <ion-label> :{{tel}}</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-70>
      <button ion-button block outline color="secondary" (click)="Getorder()" large>Get Order</button>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>{{price}} </ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-slide>
  <ion-slide>
  <div id="map_canvas"> </div>
  </ion-slide>
</ion-slides>
</ion-content>

在 SCSS 文件中

#map_canvas {
  width: 100%;
  height: 100%;
}

更新：在 ts 文件中

initializeMap() {
    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(this.map);
    this.bounds = new google.maps.LatLngBounds();
    this.map.fitBounds(this.bounds); //# auto - zoom
    this.map.panToBounds(this.bounds); //# auto-center
    this.OriginMarker(this.start_point);
    this.TargetMarker(this.end_point);
  }

Answer 1

你需要

通过ViewChild获取地图div

。

<ion-slide>
  <div id="map_canvas" #map> </div>
  </ion-slide>

在组件端：

@ViewChild('map') map:ElementRef;
initializeMap() {
    this.map = new google.maps.Map(this.map.nativeElement, {
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(this.map);
    this.bounds = new google.maps.LatLngBounds();
    this.map.fitBounds(this.bounds); //# auto - zoom
    this.map.panToBounds(this.bounds); //# auto-center
    this.OriginMarker(this.start_point);
    this.TargetMarker(this.end_point);
  }