Question

我试图在我的离子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

以下是plnkr的示例，如何初始化Google地图。

首先你必须在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 params。

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

这是我为你做的一个完整的例子。

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

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

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

离子3白屏谷歌地图

3 个答案: