Как управлять масштабом и панорамированием

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

Обзор

Чтобы управлять тем, как пользователи смогут масштабировать и панорамировать карту на вашей веб-странице, настройте такие параметры, как gestureHandling, minZoom, maxZoom и restriction. Сделать это можно в интерфейсе MapOptions.

Поведение по умолчанию

На рисунке ниже показан режим работы по умолчанию для взаимодействий с картой, при создании экземпляра которой были заданы только настройки zoom и center.

Код для этой карты приведен ниже.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});

Как управлять обработкой жестов

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

gestureHandling: cooperative

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

Код для этой карты приведен ниже.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});

Посмотреть пример

gestureHandling: auto

Карта в верхней части страницы без параметра gestureHandling обрабатывает жесты так же, как и предыдущая, для параметра gestureHandling которой задано значение cooperative, потому что все карты на этой странице находятся в <iframe>. Стандартное значение gestureHandling, которое равно auto, меняется между greedy и cooperative в зависимости от того, находится ли карта в <iframe>.

Карта находится в <iframe> Действия
Да cooperative
Нет greedy

gestureHandling: greedy

Ниже показана карта, в которой для параметра gestureHandling задано значение greedy. При этом карта реагирует на все нажатия и события прокрутки, чего не происходит при значении cooperative.

gestureHandling: none

Для параметра gestureHandling также можно задать значение none, чтобы отключить жесты на карте.

Как отключить панорамирование и масштабирование

Чтобы полностью отключить возможность панорамирования и масштабирования карты, нужно указать значения для двух параметров: gestureHandling и zoomControl.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});

Карта ниже демонстрирует сочетание значений параметров gestureHandling и zoomControl, заданных в коде выше.

Как ограничить границы и масштабирование карты

В некоторых случаях может понадобиться разрешить жесты и изменение масштаба, но ограничить отображаемую область карты определенными границами или задать минимальный и максимальный масштаб. Для этого используются параметры restriction, minZoom и maxZoom. Ниже приведены код и карта, демонстрирующие использование этих параметров.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});