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

پلاتفرم را انتخاب کنید: 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();
index.ts

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

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();
index.js

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

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>
index.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» خواهد بود.