角度2：如何从地点ID获取谷歌地点的照片？

Question

我想从Angular2应用程序中的place ID中检索Google Place Phote。我从AutoComplete方法中获得了PlaceD。

我正在使用Angular2-Google-Map库。

import { Component, NgZone, Inject, OnInit, ViewChild, EventEmitter, ElementRef } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
declare var google: any;
@Component({
  selector: 'add-location-component',
  templateUrl: './addLocation.component.html'
})
export class AddLocationComponent implements OnInit {
  private googlePlaceId: any;
  @ViewChild("search")
  public searchElementRef: ElementRef;
  public searchControl: FormControl;
  constructor(
    public authService: AuthService,
    private mapsAPILoader: MapsAPILoader,
    @Inject(NgZone) private ngZone: NgZone
  ) { }
  ngOnInit() {
    this.searchControl = new FormControl();
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          let place = autocomplete.getPlace();
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }
          this.googlePlaceId = place.place_id;
          console.log(this.googlePlaceId);
        });
      });
    });
  }

}

通过使用place_id或速度和经度，我想获取该地方的前10张照片。我被Angular2-Google-Map呆在这里。

你们能帮我吗？谢谢。

Answer 1

使用此placeD，您将使用Placesservice类。您调用getDetails方法，在回调中，您会收到具有photos属性的PlaceResult（这是PhotoPlace的数组，您在其上调用getUrl方法以检索可显示的图片）。

（这意味着您已检索了位置库以及核心Google Maps API库）

function RetrievePhotoUrlsFromPlaceId(placeId) {
  /* Instantiate a placesService */
  var placesService = new google.maps.places.PlacesService();
  /* Get place details */
  placesServices.getDetails({
    placeId: placeId
  }, (placeResult, status) => {
    if(status === 'OK') {
      var photos = placeResult.photos;
      var urls = []; // we will store the urls here
      photos.forEach((photo) => {
        urls.push(photo.getUrl({
          maxWidht: 500, // at least set one or the other - mandatory
          maxHeight: undefined
        }));
      });
      /* You have your URLs here !! */
    }
  });
}

[编辑]

实际上，由于您使用Autocomplete，因此有更简单的信息，因此您已经有一个PlaceResult。

function RetrievePhotoUrlsFromPlace(place) {
     var photos = place.photos;
     var urls = []; // we will store the urls here
          photos.forEach((photo) => {
            urls.push(photo.getUrl({
              maxWidht: 500, // at least set one or the other - mandatory
              maxHeight: undefined
            }));
          });
          /* You have your URLs here !! */
        }