مهاجرت به عکس‌های مکان جدید، مهاجرت به عکس‌های مکان جدید

عکس‌های مکان به شما امکان می‌دهد محتوای تصویری با کیفیت بالا را به صفحات وب خود اضافه کنید. این صفحه تفاوت‌های بین ویژگی‌های عکس‌های مکان در کلاس Place (جدید) و PlacesService (قدیمی) را توضیح می‌دهد و چند قطعه کد برای مقایسه ارائه می‌دهد.

• PlacesService (قدیمی) آرایه‌ای از حداکثر 10 شیء PlacePhoto را به عنوان بخشی از شیء PlaceResult برای هر درخواست getDetails() برمی‌گرداند، اگر فیلد photos در درخواست مشخص شده باشد. در مورد textSearch() و nearbySearch() به طور پیش‌فرض، اولین عکس مکان در صورت وجود، برگردانده می‌شود.
• کلاس Place آرایه‌ای از حداکثر ۱۰ شیء Photo به عنوان بخشی از درخواست fetchFields() برمی‌گرداند، البته اگر فیلد photos در درخواست مشخص شده باشد.

جدول زیر برخی از تفاوت‌های اصلی در استفاده از عکس‌های مکان بین کلاس Place و PlacesService را فهرست می‌کند:

مقایسه کد

این بخش کد مربوط به عکس‌های مکان‌ها را مقایسه می‌کند تا تفاوت‌های بین سرویس مکان‌ها و کلاس مکان را نشان دهد. قطعه کدها، کد مورد نیاز برای درخواست عکس‌های مکان‌ها در هر 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 است که به صفحه پروفایل گوگل نویسنده اشاره می‌کند. قطعه کد زیر بازیابی داده‌های مربوط به اولین نتیجه عکس را نشان می‌دهد.

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

بیشتر بدانید

• مستندات را ببینید
• مرجع getDetails
• مرجع رابط 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 برای صفحه پروفایل گوگل نویسنده و یک 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()
• مرجع کلاس Photo