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

استرجاع الحقول

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

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

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

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 Maps Platform، وهي مجموعة من مكونات الويب التي تساعد مطوري البرامج في إنشاء خرائط أفضل بالإضافة إلى ميزات الموقع الجغرافي بشكل أسرع.

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

استخدِم أداة الضبط لإنشاء رمز قابل للتضمين للمكوِّن المخصّص "نظرة عامة على المكان"، ثم صدِّره. لاستخدامه مع أطر عمل شائعة مثل React وAngular أو عدم استخدامه على الإطلاق.

البدء

للبدء، قم بتحميل مكتبة المكونات الموسعة مع 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.