我似乎无法使用 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
最佳答案
就我个人而言,我需要在我的网站上使用谷歌地图的位置,所以我所做的就是嵌入谷歌地图的位置,您可以通过点击“共享”然后“嵌入 map ”来完成此操作复制 html 代码并将其放入您的 html 代码中。
<a><iframe src="html code" class="map" width="250" height="200" frameborder="0"
style="border:0" allowfullscreen></iframe></a>
关于javascript - Google Maps JavaScript API 显示灰色空白框而不是 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57911368/