אחזור שדות
אם יש לך אובייקט או מזהה מקום של 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, }); }
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, }); }
שימוש ברכיב 'סקירה כללית של המקום'
הערה: הדוגמה הזו משתמשת בספריית קוד פתוח. אפשר לעיין בקובץ README כדי לקבל תמיכה ומשוב שקשורים לספרייה.
הרכיב 'סקירה כללית על מקום' מציג מידע מפורט על מיליוני עסקים, כולל שעות פתיחה, ביקורות כוכבים ותמונות, וכן מסלול הגעה ופעולות נוספות, בממשק משתמש מוגדר מראש ב-5 גדלים ופורמטים. זהו חלק מספריית הרכיבים המורחבים מתוך הפלטפורמה של מפות Google. זהו קבוצה של רכיבי אינטרנט שעוזרים למפתחים ליצור מפות טובות יותר ותכונות מיקום טובות יותר מהר יותר.
configurator של הסקירה הכללית על מקומות
אפשר להשתמש בכלי ההגדרה כדי ליצור רכיב מותאם אישית של 'סקירה כללית על מקום' וליצור קוד שאפשר להוסיף לדף אינטרנט.
מתחילים
כדי להתחיל, צריך לטעון את ספריית הרכיבים המורחבים באמצעות npm.
להשגת הביצועים הטובים ביותר, מומלץ להשתמש במנהל חבילות ולייבא רק את הרכיבים הדרושים לכם. החבילה הזו רשומה ב-npm בתור @googlemaps/extended-component-library. יש להתקין אותה באמצעות:
npm i @googlemaps/extended-component-library;
לאחר מכן ייבא את הרכיבים שבהם אתה משתמש באפליקציה.
import '@googlemaps/extended-component-library/place_overview.js';
אחרי שטוענים את ספריית ה-NPM, צריך לקבל מפתח API מ-Cloud Console.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>
משתמשים בתג הרכיב 'סקירה כללית על מקום' עם מזהה מקום לבחירתכם. הפריט הזה הוא placeholder של משרד 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. בדף examples ב-GitHub תוכלו לראות את הרכיבים שמופיעים בקוד לדוגמה.