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