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

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

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

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

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

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

השוואת קודים

בקטע הזה אנחנו משווים בין קוד של תמונות מקומות כדי להמחיש את ההבדלים בין שירות המקומות לבין המחלקה 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;

מידע נוסף

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

קטע הקוד הבא מראה איך להשתמש ב-method‏ fetchFields() כדי להחזיר Place Details, כולל השם המוצג ו-Place Photos. קודם כל, נוצר אובייקט 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;

מידע נוסף