שליטה במפה ובמצלמה

יכול להיות שתרצו לשלוט בתנועת המצלמה, בגובה המקסימלי או ליצור גבולות של קווי רוחב וקווי אורך שיגבילו את התנועה של המשתמש במפה נתונה. אפשר לעשות זאת באמצעות הגבלות על המצלמה.

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

הגבלת גבולות המפה

אפשר להגביל את הגבולות הגיאוגרפיים של המצלמה על ידי הגדרת האפשרות bounds.

בדוגמת הקוד הבאה מוצגות הגבלות על גבולות המפה:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

הגבלת המצלמה

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

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

דוגמת הקוד הבאה מדגימה הגבלת מצלמה:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

הגבלת גבולות המפה והמצלמה

אפשר להגביל בו-זמנית את גבולות המפה והמצלמה. בדוגמת הקוד הבאה מוצגות הגבלות על גבולות המפה והמצלמה:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

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

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

התכונה 'מפות תלת-ממד' ב-Maps JavaScript תומכת בנתיבי המצלמה הבאים:

• אנימציה של 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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      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,
    repeatCount: 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-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

שליטה בטיפול בתנועות

כשמשתמש גולל דף שמכיל מפה, פעולת הגלילה יכולה לגרום בטעות לשינוי מרחק התצוגה במפה. אפשר לשלוט בהתנהגות הזו באמצעות ההגדרה gestureHandling map.

gestureHandling: cooperative

טיפול 'משותף' בתנועות מאפשר למשתמש לגלול בדף בלי להשפיע על שינוי מרחק התצוגה או על ההזזה של המפה. כדי להגדיל את התצוגה, המשתמשים יכולים להשתמש באמצעי הבקרה, במחוות של שתי אצבעות (במכשירי מסך מגע) או בלחיצה על CMD/CTRL בזמן הגלילה.

הקוד הבא מדגים איך מגדירים את הטיפול ב<b>תנועות</b> כ'<b>שיתופי</b>':

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

טיפול בתנועות 'חמדני' מגיב לכל אירועי הגלילה ולתנועות המגע.

gestureHandling: auto

ההגדרה 'בחירה אוטומטית' לטיפול ב<a href="/android/design/patterns/gestures">תנועות</a> משנה את ה<a href="/analytics/web/glossary#behavior">התנהגות</a> של ה<a href="/shopping/merchant/glossary#map">מפה</a> בהתאם לשאלה אם ה<a href="/shopping/merchant/glossary#map">מפה</a> נמצאת בתוך <iframe> או לא, ולשאלה אם אפשר ל<a href="/general/glossary#scroll">גלול</a> בדף.

• אם המפה נמצאת בתוך <iframe>, הטיפול במחוות יהיה 'שיתופי'.
• אם המפה לא נמצאת בתוך <iframe>, הטיפול במחוות יהיה "חמדני".