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

حقول الجلب

إذا كان لديك عنصر حالي أو رقم تعريف مكان في 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 للحصول على الدعم والملاحظات المتعلقة بالمكتبة.

يمكنك عرض تفاصيل المكان من خلال بضعة أسطر من الرموز باستخدام مكوّنات الويب.

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

ما هي مكوّنات الويب؟

تتيح لك مكونات الويب إنشاء علامات HTML مغلّفة ومخصّصة وقابلة لإعادة الاستخدام يمكن استخدامها في أي مكان في ترميز HTML على تطبيق الويب الخاص بك. وهي متوافقة مع جميع المتصفّحات الحديثة وتوفّر آلية غير متوافقة مع إطار العمل لتغليف واجهة المستخدم والوظائف.

ما مكوِّن نظرة عامة على المكان؟

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

ما المقصود بمكتبة المكونات الموسعة؟

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

البدء

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