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

Select platform: Android iOS JavaScript

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

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

Restrict map bounds

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

Restrict the camera

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

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

Restrict map and camera 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,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Preset camera paths

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

В 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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Fly around

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

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

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

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

Combine animations

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

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});
}

Control gesture handling

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

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