在Angular 8中,如果地图未显示的手风琴,可能是由于以下几个原因:
确保将YOUR_API_KEY替换为您自己的API密钥。
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
map: google.maps.Map;
constructor() { }
ngOnInit() {
}
ngAfterViewInit() {
this.initMap();
}
initMap() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
确保在initMap函数中使用正确的地图参数进行初始化。
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
map: google.maps.Map;
constructor() { }
ngOnInit() {
this.loadMapLibrary().then(() => {
this.initMap();
});
}
ngAfterViewInit() {
}
loadMapLibrary(): Promise {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY';
script.onload = resolve;
script.onerror = reject;
document.body.appendChild(script);
});
}
initMap() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
确保在loadMapLibrary函数中使用正确的API密钥。
以上是一些可能导致Angular 8中地图未显示的手风琴的常见原因和解决方法。根据您的具体情况,可能需要进一步调试和调整代码。