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

בחירת פלטפורמה: 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

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

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

<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

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

gestureHandling: auto

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

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