פקדים וממשק של מפה תלת-ממדית

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

סקירה כללית של אמצעי הבקרה

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

מפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript API תומכות גם בהדרכת המשתמשים במפה באמצעות נתיבי מצלמה מוגדרים מראש. אפשר להתאים אישית את הנתיבים האלה ולשלב אותם כדי ליצור חוויות תלת-ממד עשירות.

אמצעי בקרה בכלי הניתוחים

בתמונה הבאה מוצגת קבוצת ברירת המחדל של אמצעי הבקרה שמוצגים על ידי מפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript API:

תמונה של מפה עם פקדים

בהמשך מופיעה רשימה של כל אמצעי הבקרה במפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript:

  • אמצעי הבקרה של הזום מציג לחצנים עם סימני '+' ו-'-' לשינוי רמת הזום של המפה.
  • הטיה מאפשרת לשנות את ההטיה של המצלמה.
  • הכפתור לסיבוב מאפשר לשנות את הכיוון של המצלמה.
  • הכלי להזזה מציג את הלחצנים '←', '→', '↑' ו-'↓' לשינוי מרכז המפה.

דוגמת הקוד הבאה מראה איך להחליף בין אמצעי הבקרה של הניתוח:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

הגדרות קבועות מראש של נתיבי מצלמה

‫Maps JavaScript API מספק שני נתיבי מצלמה מוגדרים מראש במפות פוטוריאליסטיות תלת-ממדיות. אפשר להתאים אישית את נתיבי המצלמה על ידי שינוי משך ההנפשה (ובכך להגדיל או להקטין את המהירות), או על ידי שילוב שלהם כדי ליצור חוויות קולנועיות יותר.

מפות פוטוריאליסטיות תלת-ממדיות ב-Maps JavaScript API תומכות בנתיבי המצלמה הבאים:

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

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

מעבר בטיסה אל

בדוגמת הקוד הבאה מוצגת אנימציה של המצלמה שמתעופפת למיקום מסוים:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

טיסה מסביב

קוד לדוגמה שמדגים איך ליצור אנימציה של המצלמה כדי שתעוף מסביב למיקום מסוים:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

שילוב אנימציות

בדוגמת הקוד הבאה מוצג שילוב של אנימציות להטסת המצלמה למיקום מסוים, ולאחר מכן סיבוב סביב המיקום כשהאנימציה הראשונה מסתיימת:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

השלבים הבאים