在angular2谷歌地图上动态显示/隐藏标记

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-map',
  template: '<div #mapContainer style="height: 400px;"></div>'
})
export class MapComponent implements AfterViewInit {
  @ViewChild('mapContainer') mapContainer: ElementRef;

  map: google.maps.Map;
  marker: google.maps.Marker;

  ngAfterViewInit() {
    const mapOptions: google.maps.MapOptions = {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
      zoom: 12 // 设置地图缩放级别
    };

    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

    const markerOptions: google.maps.MarkerOptions = {
      position: { lat: 37.7749, lng: -122.4194 }, // 设置标记的经纬度
      map: this.map,
      title: 'Hello World!' // 设置标记的标题
    };

    this.marker = new google.maps.Marker(markerOptions);
  }

  toggleMarker() {
    if (this.marker.getMap()) {
      this.marker.setMap(null); // 隐藏标记
    } else {
      this.marker.setMap(this.map); // 显示标记
    }
  }
}