نقل البيانات إلى ميزة "صور الأماكن" الجديدة

تتيح لك ميزة "وضع الصور" إضافة محتوى فوتوغرافي عالي الجودة إلى صفحات الويب. توضّح هذه الصفحة الاختلافات بين ميزات "صور الأماكن" في فئة 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.
تتطلّب الطرق استخدام دالة ردّ اتصال لمعالجة عنصر النتائج google.maps.places.PlacesServiceStatus الاستجابة. يستخدم وعدًا، ويعمل بشكل غير متزامن.
تتطلّب الطرق وضع علامة PlacesServiceStatus. لا يلزم التحقّق من الحالة، ويمكن استخدام معالجة الأخطاء العادية.
يجب إنشاء مثيل لسمة PlacesService باستخدام عنصر div أو عنصر. يمكن إنشاء مثيل لعنصر Place في أي مكان مطلوب، بدون الإشارة إلى خريطة أو عنصر صفحة.

مقارنة الرموز

يقارن هذا القسم الرمز البرمجي لصور الأماكن لتوضيح الاختلافات بين خدمة "الأماكن" و فئة Place. تعرض مقتطفات الرموز الرمز المطلوب لطلب صور الأماكن على كل واجهة برمجة تطبيقات ذات صلة.

خدمة "الأماكن" (الإصدار القديم)

يعرض المقتطف التالي الصور المعروضة باستخدام 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 يتضمّن اسم المؤلف وعنوان URL لصفحة ملفه الشخصي على Google وعنوان URL لصورته الشخصية. يعرض المقتطف التالي استرداد بيانات تحديد المصدر لنتيجة الصورة الأولى.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

مزيد من المعلومات