Bermigrasi ke Foto Tempat baru

Place Photo memungkinkan Anda menambahkan konten fotografi berkualitas tinggi ke halaman web. Halaman ini menjelaskan perbedaan antara fitur foto tempat di class Place (baru) dan PlacesService (lama), serta memberikan beberapa cuplikan kode untuk perbandingan.

  • PlacesService (lama) menampilkan array hingga 10 objek PlacePhoto sebagai bagian dari objek PlaceResult untuk permintaan getDetails() apa pun jika kolom photos ditentukan dalam permintaan. Untuk textSearch() dan nearbySearch(), foto tempat pertama akan ditampilkan secara default jika tersedia.
  • Class Place menampilkan array hingga 10 objek Photo sebagai bagian dari permintaan fetchFields() jika kolom photos ditentukan dalam permintaan.

Tabel berikut mencantumkan beberapa perbedaan utama dalam penggunaan foto tempat antara class Place dan PlacesService:

PlacesService (Lama) Place (Baru)
Antarmuka PlacePhoto Class Photo
PlacePhoto menampilkan html_attributions sebagai string. Photo menampilkan instance AuthorAttribution.
Metode memerlukan penggunaan callback untuk menangani objek hasil dan respons google.maps.places.PlacesServiceStatus. Menggunakan Promise, dan berfungsi secara asinkron.
Metode memerlukan pemeriksaan PlacesServiceStatus. Tidak diperlukan pemeriksaan status, dapat menggunakan penanganan error standar.
PlacesService harus dibuat instance-nya menggunakan peta atau elemen div. Place dapat dibuat instance-nya di mana pun diperlukan, tanpa referensi ke peta atau elemen halaman.

Perbandingan kode

Bagian ini membandingkan kode untuk foto tempat guna mengilustrasikan perbedaan antara layanan Places dan class Place. Cuplikan kode menunjukkan kode yang diperlukan untuk meminta foto tempat di setiap API.

Layanan Places (lama)

Cuplikan berikut menunjukkan foto yang ditampilkan menggunakan PlacesService, dan menampilkan hasil foto pertama di halaman. Dalam contoh ini, permintaan detail tempat menentukan ID tempat, beserta kolom name dan photos. Foto pertama kemudian ditampilkan di halaman setelah memeriksa status layanan. Saat membuat instance PlacesService, peta atau elemen div harus ditentukan; karena contoh ini tidak menampilkan peta, elemen div digunakan.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Atribusi penulis di PlacesService

PlacesService menampilkan atribusi penulis yang diperlukan sebagai string html_attributions yang berisi URL yang mengarah ke halaman profil Google penulis. Cuplikan berikut menunjukkan pengambilan data atribusi untuk hasil foto pertama.

let attributionUrl = place.photos[0].html_attributions;

Pelajari lebih lanjut

Class tempat (baru)

Cuplikan berikut menunjukkan penggunaan metode fetchFields() untuk menampilkan detail tempat, termasuk nama tampilan dan foto tempat. Pertama, objek Place baru dibuat instance-nya menggunakan ID tempat, diikuti dengan panggilan ke fetchFields() tempat kolom displayName dan photos ditentukan. Foto tempat pertama kemudian ditampilkan di halaman. Anda tidak perlu memeriksa status layanan saat menggunakan class Place, karena hal ini ditangani secara otomatis.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Atribusi penulis di class Place

Class Place menampilkan atribusi penulis sebagai instance AuthorAttribution, termasuk nama penulis, URI untuk halaman profil Google penulis, dan URI untuk foto profil penulis. Cuplikan berikut menunjukkan pengambilan data atribusi untuk hasil foto pertama.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Pelajari lebih lanjut