تفاصيل المكان

حقول الجلب

إذا كان لديك عنصر حالي أو رقم تعريف مكان في Place، يمكنك استخدام طريقة Place.fetchFields للحصول على تفاصيل عن ذلك المكان. قدِّم قائمة مفصولة بفواصل تتضمّن حقول بيانات المكان المطلوب عرضها، وحدِّد أسماء الحقول باستخدام حالة الجمل. استخدِم الكائن Place الذي تم عرضه للحصول على بيانات الحقول المطلوبة.

يستخدم المثال التالي رقم تعريف مكان لإنشاء Place جديد، ويطلب Place.fetchFields لطلب الحقلين displayName وformattedAddress، ويضيف علامة إلى الخريطة ويسجّل بعض البيانات في وحدة التحكّم.

TypeScript

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

JavaScript

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js

استخدام مكوِّن "نظرة عامة على المكان"

ملاحظة: يستخدم هذا النموذج مكتبة مفتوحة المصدر. يمكنك الاطّلاع على ملف README للحصول على الدعم والملاحظات المتعلقة بالمكتبة.

يعرض العنصر "نظرة عامة على المكان" معلومات تفصيلية حول ملايين الأنشطة التجارية، بما في ذلك ساعات العمل والمراجعات المميزة بنجمة والصور، بالإضافة إلى الاتجاهات والإجراءات الأخرى في واجهة مستخدم مُعدّة مسبقًا بخمسة أحجام وتنسيقات. وهو جزء من "مكتبة المكونات الموسّعة" التي توفّرها "منصة خرائط Google"، وهي مجموعة من مكوّنات الويب التي تساعد المطوّرين في إنشاء خرائط وميزات تحديد الموقع الجغرافي بشكل أسرع.

أداة ضبط نظرة عامة على المكان

استخدِم أداة الضبط لإنشاء مكوِّن مخصّص لنظرة عامة على المكان، وإنشاء رمز يمكنك إضافته إلى صفحة ويب.

البدء

للبدء، قم بتحميل مكتبة المكونات الموسّعة مع npm.

للحصول على أفضل أداء، استخدم مدير الحزم وقم باستيراد المكونات التي تحتاجها فقط. ويتم إدراج هذه الحزمة في npm على النحو التالي: @googlemaps/extended-component-library. يمكنك تثبيته باستخدام:

  npm i @googlemaps/extended-component-library;

ثم قم باستيراد أي مكونات تستخدمها في تطبيقك.

  import '@googlemaps/extended-component-library/place_overview.js';

بعد تحميل مكتبة npm، احصل على مفتاح واجهة برمجة التطبيقات من Cloud Console.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

استخدِم علامة المكوّن "نظرة عامة على المكان" مع رقم تعريف المكان من اختيارك. هذا عنصر نائب لمكتب Google في أوكلاند.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

هناك خمسة اختلافات في الحجم لمكون نظرة عامة على المكان. يستخدم المكوِّن التلقائي اختلافًا في الحجم بنسبة x-large. للحصول على خيارات مختلفة للمقاس، أضِف السمة size وعدِّلها.

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

لمزيد من التفاصيل، يمكنك الاطّلاع على GitHub أو npm. للاطّلاع على المكوّنات المستخدمة في نموذج الرمز، يمكنك مراجعة صفحة الأمثلة على GitHub.