javascript - Google Maps JavaScript API 显示灰色空白框而不是 map

Question

我似乎无法使用 Google Maps JavaScript API 在 Ionic 应用程序上显示 map 。

到目前为止我已经尝试过google.maps.event.trigger(map, 'resize') ，因为我改变了 map div 的宽度...从解决方案中看到了 here 。仅供引用， map 曾经工作正常，但当我尝试平移时出现了一些小故障。

在map.component.ts中

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { google } from 'google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  // Map setup
  @ViewChild('mapElement', {static: true}) mapElement: ElementRef<HTMLElement>;
  map: google.maps.Map;

  constructor() {
  }
  ngOnInit() {
    console.log('Map')
    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });
    google.maps.event.trigger(this.map, 'resize')
    console.log('Map Seconded')
  }
}

map.component.ts 中的 HTML

<div id="map-element" #mapElement></div>

CSS 用于设置 global.css 中 map 元素的样式

#map-element {
    display: block;
    height: 400px;
}

这样你就可以比较这里的 API key 是我的，我有一种感觉，问题可能出在哪里，在我找到解决方案后，我将重新生成它，AIzaSyB6RgF7vmUE0mjk_glikiuuSmpGpaNiA24

当我在 Google Chrome 上查看应用程序并尝试放大和缩小 map 时，出现此错误 ERROR TypeError: Cannot read property 'zoom' of null

Answer 1

就我个人而言，我需要在我的网站上使用谷歌地图的位置，所以我所做的就是嵌入谷歌地图的位置，您可以通过点击“共享”然后“嵌入 map ”来完成此操作复制 html 代码并将其放入您的 html 代码中。

<a><iframe src="html code" class="map" width="250" height="200" frameborder="0" 
style="border:0" allowfullscreen></iframe></a>