Google Places API - Angular 2/Typescript/Ionic 2

Question

有沒有人曾經將這個轉換爲打字稿？

var map; 
    var infowindow; 

    function initMap() { 
    var pyrmont = {lat: -33.867, lng: 151.195}; 

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

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch({ 
     location: pyrmont, 
     radius: 500, 
     type: ['store'] 
    }, callback); 
    } 

    function callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
     } 
    } 
    } 

    function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
    } 

我試圖將其轉換自己，如下圖所示，但我得到的控制檯一個錯誤，我會告訴下面的代碼，如果任何人都可以給擡起頭，其中我去錯了這將是巨大

constructor(public navCtrl: NavController, private navParams: NavParams, private ngZone: NgZone) {} 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad DetailsPage'); 
    this.loadMap(); 
    } 

    @ViewChild('map') mapElement: ElementRef; 
    map: any; 

    loadMap(){ 

    Geolocation.getCurrentPosition().then((position) => { 

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     let mapOptions = { 
     center: latLng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

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

     let service = new google.maps.places.PlacesService(mapOptions); 

     service.nearbySearch({ 
     location: latLng, 
     radius: 500, 
     type: ['pub'] 
     }, (results, status) => { 
      this.callback(results, status) 
     }); 

    }, (err) => { 
     console.log(err); 
    }); 

    } 

    callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     this.createMarker(results[i]); 
     } 
    } 
    } 

    createMarker(place){ 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: this.map, 
     position: place.geometry.location 
    }); 

    let infowindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(marker, 'click',() => { 
     this.ngZone.run(() => { 
     infowindow.setContent(place.name); 
     infowindow.open(this.map,this); 
     }); 
    }); 
    } 

    addMarker(){ 

    let marker = new google.maps.Marker({ 
     map: this.map, 
     animation: google.maps.Animation.DROP, 
     position: this.map.getCenter() 
    }); 

    let content = "<h4>You are here!</h4>";   

    this.addInfoWindow(marker, content); 

    } 

    addInfoWindow(marker, content){ 

    let infoWindow = new google.maps.InfoWindow({ 
     content: content 
    }); 

    google.maps.event.addListener(marker, 'click',() => { 
     this.ngZone.run(() => { 
     infoWindow.open(this.map, marker); 
     }); 
    }); 
    } 

在控制檯

Uncaught TypeError: this.b.getElementsByTagName is not a function 
    at B5.attributionText_changed (places_impl.js:28) 
    at zb (js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:36) 
    at B5._.y.bindTo (js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:104) 
    at Object.f6.f (places_impl.js:38) 
    at Hw.<anonymous> (js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:137) 
    at js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:105 
    at Object.<anonymous> (js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:37) 
    at js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:105 
    at js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:37 
    at js?key=AIzaSyAZTATsl9JjVKodXRnzeSk52Ndvtz-HPPU&libraries=places:105 

具體地如在控制檯文件高亮顯示錯誤。

b.getElementsByTagName("a"),c=0;c<_.w(b);c++)b[c].style.color="#444";this.H&&this.H.set("placesDataProviders",a)};B5.prototype.hide_changed=function(){_.kA(this.b,!this.get("hide"))};_.t(D5,_.y);_.k=D5.prototype;_.k.input_changed=function(){window.clearTimeout(this.f);this.f=window.setTimeout((0,_.p)(this.Ol,this),100)};_.k.Ol=function(){var a=this.l,b=this.Lb();a!=b&&(H5(this),this.l=b);this.f=null};_.k.Jm=function(){if(this.Tc())J5(this,this.Lb());else{var a={name:this.Lb()};this.Ef(a)}}; 

Answer 1

如果添加了類似的回調函數，則this上下文將丟失。有多種方法可以解決這個問題。一種是使用匿名函數包裝：

service.nearbySearch({ 
    location: latLng, 
    radius: 500, 
    type: ['pub'] 
}, (results, status) => { 
    this.callback(results, status); 
}); 

另外要注意，一個變更檢測週期沒有被觸發，當你從google.maps使用addListener電話。檢查此answer欲知更多信息。你可能會與你的addInfoWindow功能遇到這個問題：

@Component({ 
    selector : 'maps-test', 
    template : '<div #map></div>' 
}) 
export class MapsTestComponent { 

    @ViewChild('map') 
    mapElement: ElementRef; 

    constructor(private ngZone: NgZone){} 

    ngAfterViewInit() { 
     loadMap(); 
    } 

    loadMap(){ 

    Geolocation.getCurrentPosition().then((position) => { 

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     let mapOptions = { 
     center: latLng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

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

      let service = new google.maps.places.PlacesService(this.map); 


     service.nearbySearch({ 
     location: latLng, 
     radius: 500, 
     type: ['pub'] 
     }, (results, status) => { 
      this.callback(results, status) 
     }); 

    }, (err) => { 
     console.log(err); 
    }); 

    } 

    callback(results, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     this.createMarker(results[i]); 
     } 
    } 
    } 

    createMarker(place){ 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     map: this.map, 
     position: place.geometry.location 
    }); 

    let infowindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(marker, 'click',() => { 
     this.ngZone.run(() => { 
     infowindow.setContent(place.name); 
     infowindow.open(this.map,this); 
     }); 
    }); 
    } 

    addMarker(){ 

    let marker = new google.maps.Marker({ 
     map: this.map, 
     animation: google.maps.Animation.DROP, 
     position: this.map.getCenter() 
    }); 

    let content = "<h4>You are here!</h4>";   

    this.addInfoWindow(marker, content); 

    } 

    addInfoWindow(marker, content){ 

    let infoWindow = new google.maps.InfoWindow({ 
     content: content 
    }); 

    google.maps.event.addListener(marker, 'click',() => { 
     this.ngZone.run(() => { 
     infoWindow.open(this.map, marker); 
     }); 
    }); 
    } 
} 

Answer 2

我只是想給一個更新這個答案。我在用Ionic編寫的應用程序中使用這個代碼，這是一個基於Angular的庫。我能夠使用這些代碼並使其工作，但我必須改變一件事。 infowindow不會打開並繼續拋出Uncaught TypeError: this.b.getElementsByTagName is not a function錯誤。爲了解決這個問題，我不得不改變

google.maps.event.addListener(marker, 'click',() => { 
    this.ngZone.run(() => { 
    infowindow.setContent(place.name); 
    infowindow.open(this.map,this); 
    }); 

到

google.maps.event.addListener(marker, 'click',() => { 
     this.ngZone.run(() => { 
     infowindow.setContent(place.name); 
     infowindow.open(this.map,this.infowindow); 
     }); 

加入

this.infowindow

是關鍵。希望這可以幫助遇到與我一樣的問題的人