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

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

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

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

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

Вы можете ограничить географические границы зоны действия камеры, задав параметр 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();

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

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