Typescript 谷歌地图没有出现在第4页
我一直在尝试在我的Ionic 4 Webiste上插入一个Google地图,但我无法插入,因为地图没有显示出来 下面是我的代码Typescript 谷歌地图没有出现在第4页,typescript,google-maps,ionic4,Typescript,Google Maps,Ionic4,我一直在尝试在我的Ionic 4 Webiste上插入一个Google地图,但我无法插入,因为地图没有显示出来 下面是我的代码 ionViewDidEnter(){ console.log('creating map') // var latlng = new google.maps.LatLng(39.305, -76.617); this.map = new google.maps.Map(document.getElementById("map"), {
ionViewDidEnter(){
console.log('creating map')
// var latlng = new google.maps.LatLng(39.305, -76.617);
this.map = new google.maps.Map(document.getElementById("map"), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
这就是我在HTML文件中插入它的方式
<div id="map" class="map"></div>
任何提示或帮助都将不胜感激。乔什·莫罗尼(Josh Morony)有一篇很棒的文章,介绍了如何构建地图组件。基本上是这样的:
安装谷歌地图的类型
npm install @types/googlemaps --save-dev
在组件中初始化映射
/// <reference types="@types/googlemaps" />
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
constructor() {}
async ngAfterViewInit() {
const googleMaps = await getGoogleMaps("YOUR-API-KEY-HERE");
this.initMap();
}
initMap() {
const POSITION = {lat: -25.344, lng: 131.036};
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: POSITION || { lat: 22, lng: 22 }
});
}
}
function getGoogleMaps(apiKey: string): Promise<any> {
const win = window as any;
const googleModule = win.google;
if (googleModule && googleModule.maps) {
return Promise.resolve(googleModule.maps);
}
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
script.async = true;
script.defer = true;
document.body.appendChild(script);
script.onload = () => {
const googleModule2 = win.google;
if (googleModule2 && googleModule2.maps) {
resolve(googleModule2.maps);
} else {
reject("google maps not available");
}
};
});
}
希望这有帮助。那么钩子会被调用,对吗?还有,您会遇到哪些错误?
#map {
width: 100%;
height: 100%;
display: contents;
}