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

تتيح لك ميزة "الصور في الأماكن" إضافة محتوى فوتوغرافي عالي الجودة إلى صفحات الويب. توضّح هذه الصفحة الاختلافات بين ميزات صور الأماكن في الفئة Place (الجديدة) والفئة PlacesService (القديمة)، وتقدّم بعض مقتطفات الرموز للمقارنة.

• تعرض PlacesService (قديم) مصفوفة تتضمّن ما يصل إلى 10 عناصر PlacePhoto كجزء من العنصر PlaceResult لأي طلب getDetails() إذا تم تحديد الحقل photos في الطلب. في حالة textSearch() وnearbySearch()، يتم عرض صورة المكان الأول تلقائيًا إذا كانت متاحة.
• تعرض الفئة Place مصفوفة تتضمّن ما يصل إلى 10 كائنات Photo كجزء من طلب fetchFields() إذا تم تحديد الحقل photos في الطلب.

يسرد الجدول التالي بعض الاختلافات الرئيسية في استخدام صور الأماكن بين الفئة Place والفئة PlacesService:

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

يقارن هذا القسم بين الرموز البرمجية لصور الأماكن لتوضيح الاختلافات بين "خدمة الأماكن" وفئة 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;

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

• الاطّلاع على المستندات
• 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) الخاص بصفحة ملفه الشخصي على 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() مرجع
• Photo مرجع الفئة