离子3白屏谷歌地图

Question

我试图在我的 ionic 3 项目中显示谷歌地图。但是当我输入

离子服务

它只在控制台中显示地图应该没有错误的灰色屏幕。

这是我的代码：

home.ts*

import { Component , ViewChild,ElementRef } from '@angular/core';
import { NavController , Platform } from 'ionic-angular';
declare var google: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild("map") mapRef :ElementRef ;
  constructor(public navCtrl: NavController, public platform :Platform) {
    platform.ready().then(() => {
      this.showMap();
    });   
  }
  showMap(){
    const location = new google.maps.LatLng(30.414047, -9.580157);

    const option ={
      center :location ,
      zoom : 15  ,
     streetViewControl : false ,
     mapTypeId :'roadMap'
    } ;
  const map =new google.maps.Map(this.mapRef.nativeElement ,option ) ;
this.addMarker(location, map);

  }
  addMarker(position , map){
return new google.maps.Marker({
  position ,
  map
}) ;
  }}

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Google maps 
    </ion-title>
  </ion-navbar>
</ion-header>

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

home.sccs

page-home {
#map {
        height: 100%;
    }
}

加上我添加了这个：

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCIJTDtdHB4s381xQEwzVsfdBxbr9kWkJk" async defer></script>

*更新：* 当我评论这一行时：

 showMap(){
    // streetViewControl : false ,
     //mapTypeId :'roadMap'
    } ;

地图出现了。我不知道为什么。

Answer 1

问题可能在于您在constructor 中调用它。尝试将构造函数代码放在 ngAfterViewInit() 方法中。

Answer 2

我对标志性框架了解不多。
但是您在 google maps API 上的脚本没有回调，它会异步加载。
为什么不尝试在调用脚本时加入回调。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=showMap" async defer></script>

Answer 3

这里是 plnkr 的一个例子，你如何初始化你的谷歌地图。

首先你必须在 ionViewDidLoad() 中初始化你的地图，你的地图容器也需要有一个宽度：100% 和高度：100%；

ionViewDidLoad() {
    this.initMap();
  }

initMap(){
    //const location = new google.maps.LatLng(20.623736, -87.073395);
    let myLatLng = {lat: 20.623736, lng: -87.073395};
    console.log(location);
    const option ={
         center :myLatLng ,
         zoom : 15  ,
         //streetViewControl : false ,
         //mapTypeId :'roadMap'
    } ;
    //console.log(this.mapElement)
    const map = new google.maps.Map(this.mapElement.nativeElement ,option ) ;
    this.addMarker(myLatLng, map);
  }

这是因为您没有使用本机插件。您需要等待页面加载完成。

另一个观察是在您的函数 addMarker 中，您只传递必须放置键 val 参数的位置和地图值。

addMarker(position , map){
     return new google.maps.Marker({
        position: position,
        map: map,
        title: 'Hello World!'
      });
   }

这是我为您制作的完整示例。

https://plnkr.co/edit/pQqJoJrqfUVfAgiv1HA9?p=preview