遷移至新的「放置相片」

地點相片可讓您在網頁中加入高品質的相片內容。本頁面說明 Place 類別 (新版) 和 PlacesService (舊版) 中放置相片功能的差異，並提供一些程式碼片段供您比較。

  • 如果要求中指定了 photos 欄位，PlacesService (舊版) 會針對任何 getDetails() 要求，在 PlaceResult 物件中傳回陣列，陣列中最多包含 10 個 PlacePhoto 物件。在 textSearch() 和 nearbySearch() 的情況下，如果有第一個地點相片，系統會預設傳回該相片。
  • 如果要求中指定了 photos 欄位，Place 類別會傳回最多 10 個 Photo 物件的陣列，做為 fetchFields() 要求的一部分。

下表列出 Place 類別與 PlacesService 之間使用地點相片時的主要差異：

PlacesService (舊版) Place (新版)
PlacePhoto 介面 Photo 類別
PlacePhoto 會以字串形式傳回 html_attributions。 Photo 會傳回 AuthorAttribution 例項。
方法必須使用回呼來處理結果物件和 google.maps.places.PlacesServiceStatus 回應。 使用 Promise，並以非同步方式運作。
方法需要 PlacesServiceStatus 檢查。 不需要進行狀態檢查，可以使用標準錯誤處理。
PlacesService 必須使用地圖或 div 元素進行例項化。 Place 可在需要時隨處例項化，不必參照地圖或網頁元素。

程式碼比較

本節會比較地點相片的程式碼，說明 Places 服務和 Place 類別的差異。程式碼片段會顯示要求各個 API 中的地點相片所需的程式碼。

地點服務 (舊版)

以下程式碼片段示範如何使用 PlacesService 傳回相片，並在頁面上顯示第一張相片結果。在本範例中，地點詳細資料要求會指定地點 ID 和 name 和 photos 欄位。檢查服務狀態後，頁面就會顯示第一張相片。在執行個體化 PlacesService 時，必須指定地圖或 div 元素；由於這個範例沒有地圖，因此使用 div 元素。

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});
    }
  });
}

PlacesService 中的作者歸屬

PlacesService 會將必要的作者出處資訊傳回為 html_attributions 字串，其中包含指向作者 Google 個人資料頁面的網址。以下程式碼片段示範如何擷取第一個相片結果的歸因資料。

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

瞭解詳情

地點類別 (新版)

以下程式碼片段顯示如何使用 fetchFields() 方法，傳回地點詳細資料，包括顯示名稱和地點相片。首先，系統會使用地點 ID 將新的 Place 物件例項化，接著呼叫 fetchFields()，並在其中指定 displayName 和 photos 欄位。頁面上會顯示第一名相片。使用 Place 類別時，您不必檢查服務狀態，因為系統會自動處理。

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});
}

Place 類別中的作者出處資訊

Place 類別會將作者歸屬資訊傳回為 AuthorAttribution 例項，其中包含作者名稱、作者 Google 個人資料頁面的 URI，以及作者個人資料相片的 URI。以下程式碼片段顯示如何擷取第一個相片結果的出處資料。

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

瞭解詳情