장소 사진을 사용하면 고품질 사진 콘텐츠를 웹페이지에 추가할 수 있습니다.
이 페이지에서는 Place 클래스 (신규)와 PlacesService (기존)의 장소 사진 기능 간 차이점을 설명하고 비교를 위한 코드 스니펫을 제공합니다.
PlacesService(레거시)는 요청에photos필드가 지정된 경우getDetails()요청의PlaceResult객체 일부로 최대 10개의PlacePhoto객체 배열을 반환합니다.textSearch()및nearbySearch()의 경우 가능한 경우 첫 번째 장소 사진이 기본적으로 반환됩니다.Place클래스는 요청에photos필드가 지정된 경우fetchFields()요청의 일부로 최대 10개의Photo객체의 배열을 반환합니다.
다음 표에는 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를 사용하여 사진을 반환하고 페이지에 첫 번째 사진 결과를 표시하는 방법을 보여줍니다. 이 예에서 장소 세부정보 요청은 name 및 photos 필드와 함께 장소 ID를 지정합니다.
서비스 상태를 확인한 후 첫 번째 사진이 페이지에 표시됩니다.
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는 필수 작성자 저작자 표시를 작성자의 Google 프로필 페이지를 가리키는 URL이 포함된 html_attributions 문자열로 반환합니다. 다음 스니펫은 첫 번째 사진 결과의 기여 분석 데이터를 가져오는 방법을 보여줍니다.
let attributionUrl = place.photos[0].html_attributions;
자세히 알아보기
장소 클래스 (신규)
다음 스니펫은 fetchFields() 메서드를 사용하여 표시 이름과 장소 사진을 포함한 장소 세부정보를 반환하는 방법을 보여줍니다.
먼저 장소 ID를 사용하여 새 Place 객체를 인스턴스화한 다음 displayName 및 photos 필드가 지정된 fetchFields()를 호출합니다.
그러면 1등 사진이 페이지에 표시됩니다. 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 클래스는 작성자 이름, 작성자의 Google 프로필 페이지 URI, 작성자의 프로필 사진 URI를 포함하는 AuthorAttribution 인스턴스로 작성자 저작자 표시를 반환합니다. 다음 스니펫은 첫 번째 사진 결과의 기여 분석 데이터를 가져오는 방법을 보여줍니다.
let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;