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

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

Обзор

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

Стандартное управление

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

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

TypeScript

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

JavaScript

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

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

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

gestureHandling: cooperative

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

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

TypeScript

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

JavaScript

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

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

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,
});
index.ts

JavaScript

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

Карта ниже демонстрирует сочетание значений параметров 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,
    },
  },
});
index.ts

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,
    },
  },
});
index.js