Как сделать плавное зумирование в Yandex/Google картах?
Хочу сделать чтобы при заходе на страницу карта плавно сменила масштаб с страны до улицы. Помогите, как это сделать?
- Вопрос задан более трёх лет назад
- 1074 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Веб-программист
Я не очень большой специалист в картах, но работал с ними.
Так вот, масштаб там меняется шагами. Из-за чего масштабирование бывает только «дёрганое».
Это связано с тем, что карты передаются в браузер в виде небольших квадратиков и для каждого масштаба карты — квадратики свои. Невозможно плавно так сделать (ну или почти невозможно).
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Как плавно приближать в гугл картах
При встраивании карты на веб-страницу могут понадобиться специальные параметры, чтобы управлять тем, как пользователи могут масштабировать и панорамировать карту. Такие параметры, например gestureHandling , minZoom , maxZoom и restriction , определяются в интерфейсе MapOptions.
Стандартное управление
На карте ниже показано стандартное управление картой, при создании которой были заданы только параметры zoom и center .
Код для этой карты приведен ниже.
TypeScript
Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.
JavaScript
Как управлять обработкой жестов
Когда пользователь прокручивает страницу, на которой есть карта, это действие может непреднамеренно привести к изменению масштаба карты. Обработкой этого жеста можно управлять с помощью параметра карты gestureHandling.
gestureHandling: cooperative
В карте ниже для параметра gestureHandling задано значение cooperative , что позволяет пользователю прокручивать страницу обычным образом – без масштабирования и панорамирования. Чтобы менять масштаб карты, пользователю нужно нажимать элементы управления масштабом. Кроме того, на устройствах с сенсорным экраном для масштабирования и панорамирования можно использовать жесты двумя пальцами в области отображения карты.
Код для этой карты приведен ниже.
TypeScript
Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.
JavaScript
gestureHandling: auto
Карта в верхней части страницы без параметра gestureHandling обрабатывает жесты так же, как и предыдущая, для параметра gestureHandling которой задано значение cooperative , потому что все карты на этой странице находятся в . Стандартное значение gestureHandling, которое равно auto , меняется между greedy и cooperative в зависимости от того, находится ли карта в .
| Карта, которая находится в | Действия |
|---|---|
| да | cooperative |
| нет | greedy |
gestureHandling: greedy
Ниже показана карта, в которой для параметра gestureHandling задано значение greedy . При этом карта реагирует на все нажатия и события прокрутки, чего не происходит при значении cooperative .
gestureHandling: none
Для параметра gestureHandling также можно задать значение none , чтобы отключить жесты на карте.
Примечание. Параметр gestureHandling не влияет на Просмотр улиц.
Как отключить панорамирование и масштабирование
Чтобы полностью отключить возможность панорамирования и масштабирования карты, нужно указать значения для двух параметров: gestureHandling и zoomControl.
TypeScript
Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.
JavaScript
Карта ниже демонстрирует сочетание значений параметров gestureHandling и zoomControl, заданных в коде выше.
Как ограничить границы и масштабирование карты
В некоторых случаях может понадобиться разрешить жесты и изменение масштаба, но ограничить отображаемую область карты определенными границами или задать минимальный и максимальный масштаб. Для этого используются параметры restriction, minZoom и maxZoom. Ниже приведены код и карта, демонстрирующие использование этих параметров.
TypeScript
Примечание. Ознакомьтесь с руководством по работе с TypeScript в Google Картах.
JavaScript
Отправить отзыв
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-06-26 UTC.