遷移至新的「放置相片」

歐洲經濟區 (EEA) 開發人員

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

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

下表列出 Place 類別和 PlacesService 在使用地點相片時的一些主要差異：

PlacesService (舊版) Place (新)
PlacePhoto 介面 Photo 類別
PlacePhoto 會以字串形式傳回 html_attributions。 Photo 會傳回 AuthorAttribution 例項。
方法需要使用回呼來處理結果物件和 google.maps.places.PlacesServiceStatus 回應。 使用 Promise，並以非同步方式運作。
方法需要進行 PlacesServiceStatus 檢查。 不需要檢查狀態，可使用標準錯誤處理程序。 瞭解詳情。
必須使用地圖或 div 元素例項化 PlacesService。 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;

瞭解詳情