פרטי מקומות

אחזור שדות

אם יש לך אובייקט או מזהה מקום של 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

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,
  });
}

index.js

שימוש ברכיב 'סקירה כללית של המקום'

הערה: הדוגמה הזו משתמשת בספריית קוד פתוח. אפשר לעיין בקובץ README כדי לקבל תמיכה ומשוב שקשורים לספרייה.

ניתן להציג את פרטי המקום באמצעות מספר שורות קוד בלבד באמצעות רכיבי אינטרנט.

תמונה שמציגה וריאציות בגדלים X-קטן, קטן, בינוני, גדול ו-x-large של הרכיב 'סקירה כללית על מקום' שמוצג על סמך שדה הגודל שהוזן על ידי המשתמש.
איור 1: פרטי פרטי המקום עם חמש מידות שונות של גודל

מהם רכיבי אינטרנט?

רכיבי האינטרנט מאפשרים ליצור תגי HTML מקוצרים, מותאמים אישית לשימוש חוזר, שאפשר להשתמש בהם בכל מקום ב-HTML של אפליקציית האינטרנט. הם נתמכים בכל הדפדפנים המודרניים, והם חושפים מנגנון שלא תלוי במסגרות (framework) למקיף של ממשק משתמש ופונקציונליות.

מהו הרכיב 'סקירה כללית של מקום'?

הרכיב 'סקירה כללית על מקום' מציג מידע מפורט על מיליוני עסקים, כולל שעות פתיחה, ביקורות כוכבים ותמונות, וכן מסלול הגעה ופעולות נוספות, בממשק משתמש מוגדר מראש ב-5 גדלים ופורמטים.

מהי ספריית הרכיבים המורחבת?

ספריית הרכיבים המורחבים מהפלטפורמה של מפות Google היא קבוצה של רכיבי אינטרנט שעוזרים למפתחים ליצור מפות טובות יותר של מפות ותכונות מיקום מהר יותר ובפחות מאמץ. הוא כולל קוד סטנדרטי, שיטות מומלצות ועיצוב רספונסיבי, כך שממשקי המפה המורכבים הופכים לרכיב HTML אחד בלבד. בסופו של דבר, בעזרת הרכיבים האלה קל יותר לקרוא, ללמוד, להתאים אישית ולתחזק מפות וקוד שקשור למיקום.

מתחילים

כדי להתחיל, צריך לטעון את ספריית הרכיבים המורחבים באמצעות 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 תוכלו לראות את הרכיבים שמופיעים בקוד לדוגמה.