爲什麼地圖convas沒有出現在幻燈片中離子2

在這段代碼我想要加載在第二滑map但在第二Slide地圖convas在SCSS文件沒有出現爲什麼地圖convas沒有出現在幻燈片中離子2

<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>

#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); 
    }

來源

2017-05-08 RSA

可以添加該組件的一面呢？它究竟顯示了什麼？ –

嗨@Suraj我只在ordermodal.ts'@ViewChild（幻燈片）幻燈片：幻燈片;'中添加了這一行，出現了第一張幻燈片，但第二張幻燈片頁面是空白的。 – RSA

因此您還沒有加載地圖？ –

您需要通過ViewChild獲取地圖格。

<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); 
    }

來源

2017-05-08 11:38:48

仍然相同。 – RSA

爲什麼地圖convas沒有出現在幻燈片中離子2

回答

相關問題