IONIC 3：无法读取未定义的类型的属性'nativeElement'：无法读取未定义的属性'nativeElement'

Question

我正在研究IONIC 3，现在正在开发一个使用usig Google Maps API的应用程序。问题是我正在尝试执行我的应用程序，但是当它启动时，会出现以下消息：

inicio.html

Error: Uncaught (in promise): TypeError: Cannot read property 
'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined

这是产生问题的代码：

inicio.ts（仅是代码的一部分）

loadMap(){

this.geolocation.getCurrentPosition().then((position)=>{

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

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

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

  }, (err) => {
  console.log(err);
  });

}

inicio.ts（完整代码）

import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';

declare var google: any;

/**
* Generated class for the InicioPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more 
info on
* Ionic pages and navigation.
*/

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

@ViewChild('map') mapElement: ElementRef;
map: any; //Google map manager.
coords : any = { lat:0, lng: 0 } 

constructor(
public navCtrl: NavController, 
public navParams: NavParams,
public platform: Platform,
public geolocation: Geolocation) {

  platform.ready().then(() => {
      //Platform ready. All plugins enabled.
  });
}

ionViewDidLoad() {
console.log('ionViewDidLoad InicioPage');
this.loadMap();
}

loadMap(){

this.geolocation.getCurrentPosition().then((position)=>{

  let latLng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

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

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

}, (err) => {
  console.log(err);
});

}
}

inicio.html

<!--
Generated template for the InicioPage page.

See http://ionicframework.com/docs/components/#navigation for more 
info on
Ionic pages and navigation.
-->
<ion-header>

<ion-navbar>
<ion-title>Inicio</ion-title>
</ion-navbar>

</ion-header>


<ion-content padding>
<!--<h1> Esta es la página de inicio, aquí situaremos un mapa con un 
boton de añadir lugar.</h1>-->
<div id="map"></div>

</ion-content>

初始化

page-inicio {

ion-content{
    .scroll{
        height: 100%;   
    }
    #map{
        width: 100%;
        height: 100%;
    }
}

}

谢谢你的帮助！。

Answer 1

在您的HTML中，您需要进行更改

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

至

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

然后@ViewChild('map') mapElement: ElementRef;将正确解决。

请参阅此了解更多详情。