遷移至新的「放置相片」

地點相片可讓您在網頁中加入高品質的相片內容。本頁面說明 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 Service 和 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;

瞭解詳情