地點相片可讓您在網頁中加入高品質的相片內容。本頁面說明 Place
類別 (新版) 和 PlacesService
(舊版) 中放置相片功能的差異,並提供一些程式碼片段供您比較。
- 如果要求中指定了
photos
欄位,PlacesService
(舊版) 會針對任何getDetails()
要求,在PlaceResult
物件中傳回陣列,陣列中最多包含 10 個PlacePhoto
物件。在textSearch()
和nearbySearch()
的情況下,如果有第一個地點相片,系統會預設傳回該相片。 - 如果要求中指定了
photos
欄位,Place
類別會傳回fetchFields()
要求的陣列,最多可包含 10 個Photo
物件。
下表列出 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;