שדות אחזור
אם יש לך אובייקט או מזהה מקום קיימים מסוג Place
, אפשר להשתמש בפרמטר Place.fetchFields
כדי לקבל פרטים על המקום הזה. יש לספק רשימה מופרדת בפסיקים של
place data fields כדי להחזיר;
לציין שמות שדות באותיות רישיות. משתמשים באובייקט 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, קבוצה של רכיבי אינטרנט שעוזרים למפתחים ליצור מפות טובות יותר ואת תכונות המיקום מהר יותר.
מגדיר סקירה כללית של מקומות
יש להשתמש בתצורה כדי ליצור קוד ניתן להטמעה לרכיב מותאם אישית של 'סקירה כללית של המקום', ולאחר מכן לייצא כדי להשתמש בו ב-frameworks פופולריות כמו React ו-Agular, או לא להשתמש בו בכלל.
תחילת העבודה
כדי להתחיל, צריך לטעון את ספריית הרכיבים המורחבים עם 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>
משתמשים בתג הרכיב מסוג 'סקירה כללית של המקום' עם מזהה מקום לבחירתכם. זהו 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.