Angular2で観察可能なGoogleマップAPI

Question

角度プログラミングとウェブプログラミングの初心者。しかし、私が学んだことを使って、私はGoogle Map APIを使ってAngular2コンポーネントを作成しましたが、それは2点間のルーティングですが、APIからの応答で起動されるプレーン関数の代わりにObservableを使用したいと思います。どんな助力も高く評価されます。ここに私のコードです：

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); 
    } 
});