angular - 文档不适用于地图显示
问题描述
我正在尝试使用传统文档在我的 ionic 应用程序中显示谷歌地图,但它不起作用。如果我使用 viewChild 的平均值,它工作得很好。你能告诉我我的代码有什么问题吗?
代码是:
应用程序.ts
import { Component, ViewChild, NgZone } from '@angular/core';
...
import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
...
@ViewChild('map') mapElement;
constructor(@Inject(DOCUMENT) private document: Document){}
...
initMap(lat, long){
let latLng = new google.maps.LatLng(lat, long);
let mapOptions = {
center: latLng,
zoom:0,
scrollwheel: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
this.map = new google.maps.Map(this.document.getElementById("map"), mapOptions);
/* it works well if use mapElement */
// this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
/* here is some code triggering initMap()*/
ap.html
<ion-item *ngIf="select == 'map'>
<ion-card class="transparent-card" *ngFor="let subtrip of trips" >
<div #map id="map" style="height:250px;"></div>
</ion-card>
</ion-item>
解决方案
推荐阅读
- python - 在 .CSV 文件中,为每个位置(名称)计算每月平均降雪量,然后将结果保存在 python 中的两个单独的 .csv 文件中?
- reactjs - Sanity PatchEvent 函数对它们的作用不是很清楚
- python - 为什么 python pip install 给我错误 SSLCertVerificationError SSL 错误消息
- php - 解析错误:语法错误,意外“进入”(T_STRING)
- uwp - UWP 应用程序 - 在 LOB 和公共 Windows 商店帐户中发布相同的应用程序
- reactjs - 如何在刷新页面后实时更新数组(Redux)
- json - 带有嵌套 JSON 的 Pandas json_normalize
- java - 无法使用 Java 启动 Activemq
- javascript - window.open(url, target) 不会激活 Firefox 中的选项卡
- angular - Angular 7 - 如何强制 API 调用在进行额外的 API 调用之前等待 HTTPInterceptor 完成?