פרטי מקומות

בחירת פלטפורמה: Android iOS JavaScript שירות אינטרנט

שדות אחזור

אם יש אובייקט או מזהה מקום קיימים מסוג 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 לקבלת תמיכה ומשוב שקשורים לספרייה.

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

מגדיר סקירה כללית של מקומות

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

מתחילים

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