Angular2：如何从地点 ID 获取 google 地点的照片？

Question

我想从我的 angular2 应用程序中的地点 ID 检索 google 地点照片。我正在从自动完成方法中获取 placeId。

I'm using angular2-google-map library.

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

有了这个 placeId，您将使用调用 getUrl 方法的 PlacesService class. You call the getDetails method and in the callback you receive a PlaceResult which has a photos property (it's an array of PhotoPlace 来检索可显示的图片。

（这意味着您已经检索到 Place 库以及核心 google 地图 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 !! */
        }

Angular2：如何从地点 ID 获取 google 地点的照片？

Angular2 : How to get google place's photos from place id?

angular

typescript

angular2-google-maps