جزئیات مکان

واکشی فیلدها

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

جاوا اسکریپت

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 مراجعه کنید.

نمایش جزئیات مکان فقط با چند خط کد با استفاده از اجزای وب .

تصویری که تغییرات اندازه x-small، کوچک، متوسط، بزرگ و x-large مؤلفه Place Overview را بر اساس فیلد اندازه وارد شده توسط کاربر نشان می‌دهد.
شکل 1: اطلاعات جزئیات مکان با پنج تغییر اندازه مختلف

اجزای وب چیست؟

اجزای وب به شما این امکان را می دهند که تگ های HTML سفارشی، قابل استفاده مجدد و محصور شده ایجاد کنید که در هر نقطه از HTML برنامه وب شما قابل استفاده هستند. آنها در تمام مرورگرهای مدرن پشتیبانی می‌شوند و مکانیسمی را برای کپسوله‌سازی UI و عملکرد نشان می‌دهند.

مولفه Place Overview چیست؟

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

کتابخانه اجزای توسعه یافته چیست؟

Extended Component Library از Google Maps Platform مجموعه‌ای از اجزای وب است که به توسعه‌دهندگان کمک می‌کند نقشه‌ها و ویژگی‌های مکان بهتری را سریع‌تر و با تلاش کمتر بسازند. کد دیگ بخار، بهترین شیوه ها و طراحی پاسخگو را در بر می گیرد و رابط های نقشه پیچیده را در یک عنصر HTML کاهش می دهد. در نهایت، این مؤلفه‌ها خواندن، یادگیری، سفارشی‌سازی و نگهداری نقشه‌ها و کدهای مربوط به مکان را آسان‌تر می‌کنند.

شروع کنید

برای شروع، کتابخانه 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 بررسی کنید.