جزئیات مکان

واکشی فیلدها

اگر یک شی 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

از مولفه Place Overview استفاده کنید

توجه: این نمونه از یک کتابخانه متن باز استفاده می کند. برای پشتیبانی و بازخورد مربوط به کتابخانه به README مراجعه کنید.

مؤلفه «نمای کلی مکان» اطلاعات دقیقی درباره میلیون‌ها کسب‌وکار، از جمله ساعات کاری، بررسی‌های ستاره‌دار، و عکس‌ها، به‌علاوه مسیرها و سایر اقدامات را در یک رابط کاربری از پیش ساخته در ۵ اندازه و قالب نمایش می‌دهد. این بخشی از Extended Component Library، از پلتفرم Google Maps، مجموعه‌ای از مؤلفه‌های وب است که به توسعه‌دهندگان کمک می‌کند نقشه‌ها و ویژگی‌های موقعیت مکانی بهتر را سریع‌تر بسازند.

پیکربندی نمای کلی مکان

از پیکربندی برای ایجاد کد قابل جاسازی برای کامپوننت Place Overview سفارشی استفاده کنید، سپس آن را صادر کنید تا با فریم ورک‌های محبوبی مانند React و Angular یا بدون فریم ورک استفاده شود.

شروع کنید

برای شروع، کتابخانه Extended Component را با npm بارگیری کنید.

برای بهترین عملکرد، از یک مدیریت بسته استفاده کنید و فقط اجزای مورد نیاز خود را وارد کنید. این بسته در npm با نام @googlemaps/extended-component-library فهرست شده است. نصبش کن با:

  npm i @googlemaps/extended-component-library;

سپس هر مؤلفه ای را که در برنامه خود استفاده می کنید وارد کنید.

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

پس از بارگیری کتابخانه npm، یک کلید API از کنسول Cloud دریافت کنید .

  <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>

پنج تغییر اندازه در مولفه 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 بررسی کنید.