דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

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

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

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

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

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

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>

מסלולים מוגדרים מראש במצלמה

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

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

אנימציה של 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});
}