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

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

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

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

השוואת קוד

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

מידע נוסף

• לעיון במאמרי העזרה
• 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 הפניה לכיתה