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

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

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

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

אפשר להגביל את הגבולות הגיאוגרפיים של המצלמה על ידי הגדרת האפשרות 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();