带有*ngIf的AGM映射

<!-- app.component.html -->
<div *ngIf="showMap">
  <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
</div>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lat = 51.678418;
  lng = -0.295135;
  showMap = true;

  toggleMap() {
    this.showMap = !this.showMap;
  }
}

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  lat = 51.678418;
  lng = -0.295135;
  showMap = true;

  ngOnInit() {
    // 确保 Google Maps API 已加载
    this.loadGoogleMapsAPI();
  }

  loadGoogleMapsAPI() {
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY';
    script.onload = () => {
      console.log('Google Maps API loaded');
    };
    document.head.appendChild(script);
  }

  toggleMap() {
    this.showMap = !this.showMap;
  }
}