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

התכונה 'הוספת תמונות' מאפשרת לכם להוסיף לדפי האינטרנט שלכם תוכן צילום באיכות גבוהה. במאמר הזה נסביר את ההבדלים בין התכונות של התמונות של המקומות ב-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