使用谷歌地图清空离子内容 - Ionic2

Posted 2023-03-29

【中文标题】使用谷歌地图清空离子内容 - Ionic2

【英文标题】：Empty ion-content with google-map - Ionic2

【发布时间】：2017-03-13 10:50:45

【问题描述】：

我正在 ionic2 中开发一个页面以处理谷歌地图。 但我的离子含量什么也没显示。我的html 页面包含以下代码：

<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) 时，在加载页面时地图没有显示。

在 google API 上创建的密钥没有限制，它是通过我的活动 API Google Maps javascript API 完成的。

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

 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

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

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

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

【问题讨论】：

抱歉，我在您的 ionViewLoaded 和 loadMap 函数中没有看到 console.log。这种方式无法通过chrome控制台判断函数是否正在运行。

这只是一个例子，但我更新了问题以包含它。

很好，也许你的组件从未被调用过。你的html页面叫做search.html？你把页面搜索选择器放在哪里了？

它正在加载的页面本身，因为我可以看到它和标题，只是没有显示地图。如果我在 中写了一些东西，它也会显示出来。 app.modules.ts 设置正确。

嗯。您是否尝试使用 ngOnInit 而不是 ionViewLoaded？

【参考方案1】：

只需将地图组件放在 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>