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

اختيار النظام الأساسي: 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>، ستكون معالجة الإيماءات "جامدة".