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

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

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

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

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

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

דוגמת הקוד הבאה ממחישה איך להגביל את גבולות המפה:

TypeScript

async function init(): Promise<void> {
    await google.maps.importLibrary('maps3d');

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

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

JavaScript

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

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

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

CSS

html,
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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            id="gmp-map-3d"
            center="-47.1375,169.5235,150000"
            tilt="67.5"
            mode="hybrid"
            gesture-handling="cooperative">
        </gmp-map-3d>
    </body>
</html>

הגבלת המצלמה

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

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

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

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

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

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

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
    north: 20.93,
    west: -156.38,
    south: 20.90,
    east: -156.31,
};

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

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

gestureHandling: cooperative

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

הקוד הבא מדגים איך להגדיר את הטיפול בתנועות ל-"cooperative":

<gmp-map-3d
    id="gmp-map-3d"
    center="20.92,-156.36,500"
    tilt="67.5"
    mode="hybrid"
    gesture-handling="cooperative">
</gmp-map-3d>

gestureHandling: greedy

הטיפול בתנועות מסוג "Greedy" מגיב לכל אירועי הגלילה ותנועות המגע.

gestureHandling: auto

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

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