谷歌地图中的空离子含量-Ionic2 [英] Empty ion-content with google-map - Ionic2

问题描述

我正在ionic2中开发一个页面以处理google map. 但是我的离子含量什么也没显示.我的html页面包含以下代码:

I'm developing a page in ionic2 in order to handle google map. But my ion-content display nothing. My html page contains the following code:

<ion-header>
    <ion-navbar>
        <ion-title>{{text.title}}</ion-title>
    </ion-navbar>
</ion-header>

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

我的ts文件包含:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Recosh } from '../../providers/recosh';

declare var google;

@Component({
    selector: 'page-search',
    templateUrl: 'search.html'
})
export class SearchPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
    text: any;

  constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) {
        this.text = {
            title   :   this.recoshService.getMessage(1),
        }
  }

  ionViewLoaded(){
    this.loadMap();
  }

  loadMap(){
    console.log("loading maps...");
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

  }
}

和src/index.html也具有以下行:

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

当我启动ionic2项目(ionic serve)时，在加载页面时不会显示地图.

When I start my ionic2 project ( ionic serve ), while loading the page the map is not shown.

在Google APIs上创建的密钥没有限制，并且是通过我的活动API Google Maps JavaScript API完成的.

The created key on google APIs has no restriction, and it was done with my active API Google Maps JavaScript API.

我认为这是API的问题，因此我添加了以下所有内容:

I thought it was a problem with APIs so I added all the following:

 Google Maps Android API
 Google Maps Directions API
 Google Maps Geocoding API
 Google Maps Geolocation API
 Google Maps JavaScript API
 Google Maps SDK for iOS
 Google Places API for Android
 Google Places API for iOS
 Google Places API Web Service

但是我的页面仍然没有显示任何地图.

But my page still does not show any map.

奇怪的是，我的console.log在loadMap()函数中没有显示在我的Web浏览器(chrome)的控制台中；所以似乎根本没有调用loadMap ...

The strange thing is that my console.log in the loadMap() function it is not shown in the console of my web browser (chrome); so it seems that loadMap is not called at all...

我的应用程序中实际上有一些警告，但它们在进入页面之前出现:

There are actually some warnings in my app but they appear before entering in the page:

推荐答案

只需将地图成分置于离子含量之外

Just put the map component outside of ion-content

<ion-header>
<ion-navbar>
    <ion-title>{{text.title}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content></ion-content>

<div #map id="map"></div>  

这篇关于谷歌地图中的空离子含量-Ionic2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！