הגבלת השידור מהמצלמה והגבולות שלו

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

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

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

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

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

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

TypeScript

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

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

JavaScript

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

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

דוגמה לניסיון

הגבלת המצלמה

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

  • 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();

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

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

gestureHandling: cooperative

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

הקוד הבא מדגים איך מגדירים את הטיפול במחוות כ'שיתופי':

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

gestureHandling: greedy

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

gestureHandling: auto

ההגדרה 'אוטומטי' לטיפול במחוות משנה את ההתנהגות של המפה בהתאם לשאלה אם המפה מוכלת ב-<iframe> או לא, ולשאלה אם אפשר לגלול בדף.

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