محدود کردن نمای دوربین و محدودیت‌ها

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

ممکن است برای شما مطلوب باشد که حرکت دوربین، حداکثر ارتفاع یا ایجاد مرزهای طول و عرض جغرافیایی را که حرکت کاربر را در یک نقشه مشخص محدود می‌کند، کنترل کنید. می‌توانید این کار را با استفاده از محدودیت‌های دوربین انجام دهید.

مثال زیر نقشه‌ای را نشان می‌دهد که مرزهای مکانی آن برای محدود کردن حرکت دوربین تنظیم شده است:

محدود کردن مرزهای نقشه

شما می‌توانید با تنظیم گزینه bounds محدوده‌های جغرافیایی دوربین را محدود کنید.

نمونه کد زیر محدود کردن مرزهای نقشه را نشان می‌دهد:

تایپ اسکریپت 

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();

جاوا اسکریپت 

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();

سی‌اس‌اس 

/* 
 * 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>
    <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 map کنترل کنید.

مدیریت حرکات: cooperative

مدیریت حرکات «همکاری» به کاربر اجازه می‌دهد بدون تأثیر بر بزرگنمایی یا حرکت افقی نقشه، صفحه را پیمایش کند. برای بزرگنمایی، کاربران می‌توانند از کنترل‌ها، حرکات دو انگشتی (برای دستگاه‌های لمسی) یا با نگه داشتن CMD/CTRL هنگام پیمایش استفاده کنند.

کد زیر تنظیم مدیریت ژست‌ها را روی «همکاری» نشان می‌دهد:

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

مدیریت حرکات: greedy

مدیریت حرکات "حریصانه" به تمام رویدادهای پیمایش و حرکات لمسی واکنش نشان می‌دهد.

مدیریت حرکات: auto

مدیریت خودکار ژست‌ها، رفتار نقشه را بسته به اینکه نقشه در <iframe> قرار دارد یا خیر و اینکه آیا صفحه قابل اسکرول است یا خیر، تغییر می‌دهد.

  • اگر نقشه درون یک <iframe> باشد، مدیریت حرکات به صورت "مشارکتی" انجام خواهد شد.
  • اگر نقشه درون یک <iframe> نباشد، مدیریت حرکات "حریصانه" خواهد بود.