使用谷歌地图NodeJS地理编码回调函数结果在AngularJS 2组件模板上绘制地图

// 在服务中进行地理编码
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class GeocodingService {
  constructor(private http: Http) {}

  geocodeAddress(address: string): Promise<any> {
    const geocodeUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address);

    return this.http.get(geocodeUrl)
      .toPromise()
      .then(response => response.json())
      .then(data => {
        const location = data.results[0].geometry.location;
        return { lat: location.lat, lng: location.lng };
      })
      .catch(error => console.log(error));
  }
}

// 在组件中使用地理编码服务和地图库来绘制地图
import { Component, OnInit } from '@angular/core';
import { GeocodingService } from './geocoding.service';

@Component({
  selector: 'app-map',
  template: '<div id="map"></div>',
  styles: ['#map { height: 400px; width: 100%; }']
})
export class MapComponent implements OnInit {
  constructor(private geocodingService: GeocodingService) {}

  ngOnInit() {
    const address = 'Your address here';

    this.geocodingService.geocodeAddress(address)
      .then(location => this.initMap(location))
      .catch(error => console.log(error));
  }

  initMap(location: any) {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: location,
      zoom: 15
    });

    const marker = new google.maps.Marker({
      position: location,
      map: map,
      title: 'Your location'
    });
  }
}