تقييد شاشة الكاميرا وحدودها

اختيار النظام الأساسي: 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="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2F3d%2Fstyle.css&mode=full" />
        <script type="module" src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2F3d%2Findex.js&mode=full"></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>، ستكون معالجة الإيماءات "جشعة".