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

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

Обзор

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

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

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

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

Машинопись 

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

JavaScript 

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

Управление обработкой жестов

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

Обработка жестов: cooperative

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

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

Машинопись 

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 .

Машинопись 

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 . Приведенный ниже код и карта демонстрируют эти параметры.

Машинопись 

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