在Angular2中使用Observable的谷歌地图API

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

declare var google: any; // 声明谷歌地图的全局变量

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map: any;

  constructor() { }

  ngOnInit() {
    this.loadMap();
  }

  loadMap() {
    // 使用Observable来异步加载谷歌地图API
    const mapLoaded = new Observable(observer => {
      if (typeof google !== 'undefined') {
        observer.next();
        observer.complete();
      } else {
        // 动态创建script标签来加载谷歌地图API
        const script = document.createElement('script');
        script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY';
        script.onload = () => {
          observer.next();
          observer.complete();
        };
        document.body.appendChild(script);
      }
    });

    // 订阅Observable并在加载完成后初始化地图
    mapLoaded.subscribe(() => {
      this.initMap();
    });
  }

  initMap() {
    // 在这里可以使用谷歌地图API的相关功能
    this.map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }
}

<div id="map"></div>