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

پلاتفرم را انتخاب کنید: 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» خواهد بود.