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

Выберите платформу: 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

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

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

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

На карте ниже используется параметр жестеHandling , для которого установлено 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

Посмотреть образец

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

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

Карта, содержащаяся в <iframe> Поведение
да cooperative
нет greedy

Обращение с жестом: greedy

Ниже приведена карта с жадным значением для greedy Handling . Эта карта реагирует на все сенсорные жесты и события прокрутки, в отличие от cooperative .

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

Для параметра «gestHandling» также можно установить значение « none , чтобы отключить жесты на карте.

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

Чтобы полностью отключить возможность панорамирования и масштабирования карты, необходимо включить две опции: gestHandling и 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

На карте ниже показано сочетание жестов Handling и ZoomControl в приведенном выше коде.

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

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