问题描述
我已经检查过这个问题的其他答案,但到目前为止似乎没有任何帮助。我正试图在离子2应用程序中显示地图。但是当我尝试选择 #map
div时,它返回undefined。这是代码
I have checked other answer for this problems but nothing seems helpful so far. I'm trying to display map in ionic 2 app. But When I try to select #map
div it returns undefined. Here is the code
page1.html
< div id =map#mapDiv style =height:380px; >< / div>
page1.html<div id="map" #mapDiv style="height:380px;"></div>
page1.ts
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var google;
@Component({
selector: 'page-page1',
templateUrl: 'page1.html',
})
export class Page1 implements AfterViewInit {
@ViewChild('mapDiv') mapDiv:ElementRef;
map;
t;
constructor(public navCtrl: NavController) {
this.initMap();
}
ngAfterViewInit(){
console.log('My element: ' + this.mapDiv);
}
initMap()
{
this.map = new google.maps.Map(this.mapDiv.nativeElement, {
center: new google.maps.LatLng(51.505, -0.09),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11
});
this.t = new Date().getTime();
var waqiMapOverlay = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return 'http://tiles.aqicn.org/tiles/usepa-aqi/' + zoom + "/" + coord.x + "/" + coord.y + ".png?token=_TOKEN_ID_";
},
name: "Air Quality",
});
this.map.overlayMapTypes.insertAt(0,waqiMapOverlay);
}
}
控制台错误
`Error in ./Page1 class Page1_Host - inline template:0:0 caused by: Cannot read property 'nativeElement' of undefined`
请告诉我我在哪里犯错误。我想选择div,以便地图可以显示在 #map
div中。
Please tell me where I'm mistaking. I want to select the div so that the map can be shown inside of #map
div.
提前致谢
推荐答案
你打电话给 initMap()
在构造函数中。
You call initMap()
in the constructor.
@ViewChild('mapDiv')mapDiv:ElementRef;
未在<$之前初始化调用c $ c> ngAfterViewInit()。
这篇关于@viewChild返回undefined的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!