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

Question

Angular和web编程中的新手。然而，使用我学到的东西，我使用Google Map API创建了一个Angular2组件，并且它在两点之间进行路由，但是我想使用Observable而不是普通函数，这会在API响应时触发。任何帮助将不胜感激。这里是我的代码：

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

declare var google: any; 

@Component({ 
    selector: 'gmap', 
    templateUrl: 'gmap.component.html', 
    styleUrls: ['gmap.component.css'] 
}) 
export class GMapComponent implements OnInit, OnChanges { 

    directionsService = new google.maps.DirectionsService(); 
    directionsDisplay; 
    map; 

    ngOnInit() { 
    this.directionsDisplay = new google.maps.DirectionsRenderer(); 
    this.map = new google.maps.Map(document.getElementById('gmap'), { 
     zoom: 8, 
     center: { lat: 51.59, lng: -0.44 } 
    }); 
    this.directionsDisplay.setMap(this.map); 

    } 

    onSearchBarGO($event) { 
    var directionsDisplay = this.directionsDisplay; 
    //console.log($event); 

    this.directionsService.route({ 
     origin: $event.from, 
     destination: $event.to, 
     waypoints: [], 
     optimizeWaypoints: true, 
     travelMode: $event.mode.toUpperCase() 
    }, function (response, status) { 
     var parent = this; 
     if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 



    } 

} 

Answer 1

您必须使用Observable的转换工厂方法。

Observable.bindCallback(this.directionsService.route)({ 
    origin: $event.from, 
    destination: $event.to, 
    waypoints: [], 
    optimizeWaypoints: true, 
    travelMode: $event.mode.toUpperCase() 
}) 
.subscribe(function (response, status) { 
    var parent = this; 
    if (status === 'OK') { 
    directionsDisplay.setDirections(response); 
    } else { 
    window.alert('Directions request failed due to ' + status); 
    } 
});