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

اختيار النظام الأساسي: 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 أثناء الانتقال للأعلى أو للأسفل.

يوضّح الرمز التالي كيفية ضبط معالجة الإيماءات على "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

تتفاعل معالجة الإيماءات "الجشعة" مع جميع أحداث الانتقال وإيماءات اللمس.

gestureHandling: auto

تؤدي معالجة الإيماءات "التلقائية" إلى تغيير سلوك الخريطة بناءً على ما إذا كانت الخريطة مضمّنة في <iframe> أم لا، وما إذا كانت الصفحة قابلة للتمرير.

  • إذا كانت الخريطة ضمن <iframe>، ستكون معالجة الإيماءات "تعاونية".
  • إذا لم تكن الخريطة ضمن <iframe>، ستكون معالجة الإيماءات "greedy".