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

اختيار النظام الأساسي: Android iOS JavaScript خدمة الويب

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

إذا كان لديك عنصر 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

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

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

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

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

استخدِم أداة الضبط لإنشاء رمز برمجي قابل للتضمين لمكوّن "نظرة عامة على المكان" المخصّص، ثم صدِّره ليتم استخدامه مع أُطر العمل الرائجة مثل 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.