واکشی فیلدها
اگر یک شی 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, }); }
جاوا اسکریپت
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, }); }
از مولفه 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 بررسی کنید.