Управляйте картой и камерой

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

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

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

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

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

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

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,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Ограничить доступ к камере

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

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

Заданные траектории движения камеры

3D-карты в Maps JavaScript предоставляют два предустановленных пути движения камеры. Пути движения камеры можно настроить, изменив продолжительность анимации (тем самым увеличив или уменьшив скорость) или комбинируя их для создания более кинематографичных эффектов.

В Maps JavaScript 3D-карты поддерживают следующие пути перемещения камеры:

• Анимация flyCameraTo переносит камеру из центра карты в указанное место назначения.
• Анимация flyCameraAround вращает камеру вокруг точки на карте на указанное количество оборотов.

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

Перелет в

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

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Полетайте вокруг

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

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Объединить анимации

Приведенный ниже пример кода демонстрирует объединение анимаций для перемещения камеры в заданное место, а затем вращения вокруг этой точки после завершения первой анимации:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

Обработка жестов управления

Когда пользователь прокручивает страницу, содержащую карту, прокрутка может непреднамеренно привести к масштабированию карты. Вы можете управлять этим поведением, установив параметр 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> , обработка жестов будет "жадной".