Question

我一直试图在我的本地浏览器上显示谷歌地图，但屏幕似乎是空的。

我觉得地图正在后端加载，但没有显示。

我可以看到地图光标指针。

在我的代码index.html文件中，我提到了maps api

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="https://maps.google.com/maps/api/js?key=AIzaSyCToBv6QzLZWTuqHa7aPeHn6KCCy-nuwKk"></script>

另外，在我的.html文件中，

<ion-content>
    <div #map id="map" style="width:500px;height:500px;"></div>
</ion-content>

和.ts文件，代码库看起来像：

declare var google;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  @ViewChild('map') mapRef : ElementRef;

  map : any;

  game : any;

  currentTournamentData : any;

  location : any;

  constructor(private navCtrl: NavController, private navParams: NavParams,
    private eliteApi : EliteApi,private platform : Platform) {
    this.showMap();
  }

  ionViewDidLoad() {
    this.game = this.navParams.data;
    this.currentTournamentData = this.eliteApi.getCurrentTournamentData();
    this.location = this.currentTournamentData.locations[this.game.locationId];
  }

  showMap() {   
    this.platform.ready().then(() => {
        var latLng = new google.maps.LatLng(-34.9290, 138.6010);
        var mapOptions  = {
            center : latLng,
            zoom : 15,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions);
    });
  }

}

控制台上没有错误，但没有运气。

请帮忙。

Answer 1

尝试使用空白模板，找出造成问题的原因。删除@IonicPage()，它可以完美运行。有时最好从平板清洁开始。

Ionic 3 Google Map不会显示在桌面浏览器上

1 个答案: