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

是关键。希望这可以帮助遇到与我一样的问题的人