0

我想从我的 angular2 应用程序中的地点 id 检索谷歌地点照片。我从 Autocomplete 方法中获取 placeId 。

我正在使用 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 困在这里。

你们能帮帮我吗。谢谢。

4

1 回答 1

2

有了这个 placeId，您将使用PlacesService类。您调用该getDetails方法并在回调中收到一个PlaceResult具有photos属性的数组（它是PhotoPlace您调用该getUrl方法以检索可显示图片的数组）。

（这意味着您已经检索了 Place 库以及核心 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 !! */
        }
于 2017-02-21T12:56:34.073 回答