Ограничить область обзора камеры и границы кадра.

Выберите платформу: Android iOS JavaScript

Вам может потребоваться управлять поворотом камеры, максимальной высотой или устанавливать границы широты и долготы, ограничивающие перемещение пользователя на заданной карте. Это можно сделать с помощью ограничений камеры .

В следующем примере показана карта с заданными границами местоположения, ограничивающими движение камеры:

Ограничить границы карты

Вы можете ограничить географические границы зоны действия камеры, задав параметр bounds .

Следующий пример кода демонстрирует ограничение границ карты:

Машинопись 

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 map.

Обработка жестов: 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> , обработка жестов будет "жадной".