Css 使用javascript API在ionic2应用程序中添加google地图

我正试图创建一个基本的ionic2应用程序与谷歌地图根据

在本教程中，google地图集成在

home

页面中，其样式元素保存在

home.scss

在我的应用程序中，我想将地图集成到另一个名为

temple

的页面中。所以我把样式元素保存在庙宇的scss页面

temples.scss

。但是，我这样做看不到地图，如果我将样式元素保留在

home.scss

中，地图就会显示得很好。我对这种行为感到困惑

现在我的问题是，要添加地图，是否必须只在

home.scss

中保留样式元素，而不管我将地图添加到哪个页面？如果没有，请指出我错在哪里

下面是我的应用程序代码

temple.html中的代码：

<ion-header>
    <ion-navbar>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>தாங்கல்</ion-title>
    </ion-navbar>
</ion-header>

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

import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var google;
@Component({
selector: 'temple-page',
  templateUrl: 'build/pages/temples/temples.html'
})
export class TemplesPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
  constructor(private navCtrl: NavController) {}

  ionViewLoaded(){this.loadMap();}

  loadMap(){
    let latLng = new google.maps.LatLng(8.117042, 77.491573);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
}

//This component is linked with map in temples page
//Map component content starts here
.ios, .md
{
temple-page{
          .scroll-content {height: 100%}
          #map {width: 100%;height: 100%;}
         }
}
//Map component content ends here

从家中输入代码。scss:

<ion-header>
    <ion-navbar>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>தாங்கல்</ion-title>
    </ion-navbar>
</ion-header>

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

import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var google;
@Component({
selector: 'temple-page',
  templateUrl: 'build/pages/temples/temples.html'
})
export class TemplesPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
  constructor(private navCtrl: NavController) {}

  ionViewLoaded(){this.loadMap();}

  loadMap(){
    let latLng = new google.maps.LatLng(8.117042, 77.491573);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }
}

//This component is linked with map in temples page
//Map component content starts here
.ios, .md
{
temple-page{
          .scroll-content {height: 100%}
          #map {width: 100%;height: 100%;}
         }
}
//Map component content ends here

我的应用程序文件夹结构的屏幕截图

---

您能检查css是否实际应用于元素吗？请注意，不能有两个带有map元素的div。就一个是的，我确认了。

home.scss

中可用的CSS内容以某种方式与

temphals.html

中的div链接。如果我将CSS内容从

home.scss

移动到

temples.scss

中，则地图不会显示。我想将页面的所有代码保存在同一个目录中。您的SCS是否与选择器一起工作？在庙宇页面或主页中？它链接到庙宇页面。我希望我没有弄错你的问题，你是否会问我的

temple.scss

是否与temple页面选择器或主页选择器链接/连接？我的应用程序是否可以没有选择器？我的意思是，目前，如果我删除选择器，那么地图将不会显示。我想知道我要做的改变，以删除选择器和显示地图。