מעבר לגרסה החדשה של 'תמונות של מקומות'

התכונה 'הוספת תמונות' מאפשרת לכם להוסיף לדפי האינטרנט שלכם תוכן צילום באיכות גבוהה. בדף הזה מוסבר על ההבדלים בין התכונות של תמונות של מקומות בכיתה Place (חדשה) ובכיתה PlacesService (קודמת), ומוצגים קטעי קוד להשוואה.

• PlacesService (מדור קודם) מחזירה מערך של עד 10 אובייקטים מסוג PlacePhoto כחלק מהאובייקט PlaceResult לכל בקשה מסוג getDetails(), אם השדה photos צוין בבקשה. במקרה של textSearch() ו-nearbySearch(), התמונה הראשונה של המקום מוחזר כברירת מחדל אם היא זמינה.
• הכיתה Place מחזירה מערך של עד 10 אובייקטים מסוג Photo כחלק מבקשת fetchFields(), אם השדה photos צוין בבקשה.

בטבלה הבאה מפורטים חלק מההבדלים העיקריים בשימוש בתמונות של מקומות בין הכיתה Place לבין PlacesService:

השוואת קוד

בקטע הזה מוצגת השוואה בין הקוד של תמונות של מקומות כדי להמחיש את ההבדלים בין שירות המקומות לבין הכיתה Place. בקטעי הקוד מוצג הקוד הנדרש לבקשת תמונות של מקומות בכל ממשק API רלוונטי.

שירות Places (קודם)

קטע הקוד הבא מראה את החזרת התמונות באמצעות PlacesService, והצגת התוצאה הראשונה של התמונה בדף. בדוגמה הזו, בבקשה לקבלת פרטי המקום מצוין מזהה מקום, יחד עם השדות 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 שמכילה כתובת URL שמפנה לדף הפרופיל של הכותבים ב-Google. קטע הקוד הבא מראה אחזור של נתוני שיוך לתוצאת התמונה הראשונה.

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

מידע נוסף

• לעיון במסמכי התיעוד
• getDetails reference
• מידע על ממשק PlacePhoto

סיווג מקום (חדש)

קטע הקוד הבא מראה שימוש בשיטה fetchFields() כדי להחזיר את פרטי המקום, כולל השם המוצג ותמונות של המקום. קודם נוצר אובייקט 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, כולל שם המחבר, מזהה URI לדף הפרופיל של המחבר ב-Google ומזהה 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;

מידע נוסף

• הדוגמה המלאה
• לעיון במסמכי התיעוד
• fetchFields() reference
• מידע נוסף על הכיתה Photo