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

اختيار النظام الأساسي: Android iOS JavaScript

قد يكون من المفيد لك التحكّم في حركة الكاميرا الأفقية أو أقصى ارتفاع لها أو إنشاء حدود خطوط الطول ودوائر العرض التي تقيّد حركة المستخدم في خريطة معيّنة. يمكنك إجراء ذلك باستخدام قيود الكاميرا.

يعرض المثال التالي خريطة تم ضبط حدود الموقع الجغرافي فيها للحدّ من حركة الكاميرا:

تقييد حدود الخريطة

يمكنك تقييد الحدود الجغرافية للكاميرا من خلال ضبط الخيار bounds.

تعرض عيّنة التعليمات البرمجية التالية كيفية تقييد حدود الخريطة:

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

تجربة نموذج

تقييد الكاميرا

يمكنك تقييد حركة الكاميرا من خلال ضبط أيّ من الخيارات التالية:

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

تعرض عيّنة التعليمات البرمجية التالية كيفية تقييد الكاميرا:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

تقييد حدود الخريطة والكاميرا

يمكنك في الوقت نفسه تقييد حدود الخريطة والكاميرا. تعرض عيّنة التعليمات البرمجية التالية كيفية تقييد حدود الخريطة والكاميرا:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

التحكّم في معالجة الإيماءات

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

gestureHandling: cooperative

تسمح معالجة الإيماءات "التعاونية" للمستخدم بتمرير الصفحة بدون التأثير في مستوى تكبير الخريطة أو عرضها الشامل. للتكبير، يمكن للمستخدمين استخدام عناصر التحكّم أو إيماءات بإصبعَين (للأجهزة التي تعمل باللمس) أو الضغط مع الاستمرار على CMD/CTRL أثناء التمرير.

تعرض التعليمات البرمجية التالية كيفية ضبط معالجة الإيماءات على "تعاونية":

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

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

gestureHandling: auto

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

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