0
在這段代碼我想要加載在第二滑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);
}
可以添加該組件的一面呢?它究竟顯示了什麼? –
嗨@Suraj我只在ordermodal.ts'@ViewChild(幻燈片)幻燈片:幻燈片;'中添加了這一行,出現了第一張幻燈片,但第二張幻燈片頁面是空白的。 – RSA
因此您還沒有加載地圖? –