פרטי מקומות

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

שדות אחזור

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

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

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