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

מפתחים באזור הכלכלי האירופי (EEA)

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

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

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

‫PlacesService (גרסה קודמת) Place (חדש)
ממשק PlacePhoto כיתה Photo
‫PlacePhoto מחזירה את html_attributions כמחרוזת. השיטה Photo מחזירה מופע של AuthorAttribution.
ב-methods צריך להשתמש בקריאה חוזרת כדי לטפל באובייקט התוצאות ובתגובה google.maps.places.PlacesServiceStatus. משתמש ב-Promises, ופועל באופן אסינכרוני.
השיטות מחייבות PlacesServiceStatusבדיקה. אין צורך בבדיקת סטטוס, אפשר להשתמש בטיפול רגיל בשגיאות. מידע נוסף
צריך ליצור מופע של PlacesService באמצעות מפה או רכיב div. Place אפשר ליצור מופע של המחלקה בכל מקום שנדרש, בלי הפניה למפה או לאלמנט בדף.

השוואת קוד

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

שירות המקומות (מדור קודם)

בקטע הקוד הבא מוצגות תמונות חוזרות באמצעות 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;

מידע נוסף

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

קטע הקוד הבא מראה איך להשתמש בשיטה 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;

מידע נוסף