Яндекс карты конструктор отключить скролл

Обновлено: 07.01.2025

Сегодня мы начнем знакомство с апи Яндекс.Карт. Судя по вашим комментариям, мои статьи по Google Maps оказались полезными, поэтому я решил написать еще и про Яндекс.Карты.

Для начала давайте разберемся, зачем могут понадобиться Яндекс.Карты, если вы можете использовать Google Maps. Пожалуй самый веский аргумент для использования карт от Яндекса — лучшая поддержка городов России и СНГ. Да, Гуглокарты охватывают больше городов по миру, но по России Яндекс все же лучше.

Итак, хватит лирических отступлений, переходим к делу. Сегодня мы научимся подключать карты и настраивать элементы управления.

Вызов карты

Итак, для начала нужно сходить и получить ключ для работы с картами. Идем, получаем.

При вызове карты, она будет показываться внутри указанного вами блока, так что необходимо сначала этот блок создать. Затем, подключаем саму библиотеку Яндекс.Карт с указанным вами ключом:

Ну тут все ясно. Теперь нам нужно вызвать карту, поместить ее в указанный контейнер и настроить. Вызов карты делается так:

Теперь давайте посмотрим, как вызывать карту разного типа, ведь есть три встроенные типа карты:

«схема» — схематичное отображение объектов местности, используется по умолчанию; значение для аттрибута типа — YMaps.MapType.MAP;
«спутник» — спутниковая карта местности; YMaps.MapType.SATELLITE;
«гибрид» — спутниковая карта с названиями географических объектов; YMaps.MapType.HYBRID.

Для того, чтобы при вызове карты задать отличный от умолчания тип, нужно вызвать метод setType() и сообщить ему нужный тип карты:

Элементы управления

Для управления картой существует несколько типов элементов управления.

Внешние

переключатель типа карты: схема, спутник, гибрид; TypeControl();
панель инструментов: перемещение карты, увеличение и измерение расстояния; ToolBar();
элемент масштабирования: тут все ясно; Zoom();
обзорная карта: уменьшенная карта показываемой местности; MiniMap();
масштабная линейка: позволяет оценить расстояние на карте; ScaleLine();
поиск по карте, позволяющий искать географические объекты; SearchControl();

Внешние элементы бывают пользовательские и встроенные. Пока что рассмотрим встроенные.

Для внешних элементов можно так же задавать их положение относительно границ блока карты, например чтобы расположить обзорну карту в правом нижнем углу с отступами в 10 пикселов от границ, нужно написать вот так:

Встроенные

перемещение; enableDragging() и disableDragging();
масштабирование двойным щелчком мыши; enableDblClickZoom() и disableDblClickZoom();
масштабирвоание колесиком мыши; enableScrollZoom() и disableScrollZoom();
лупа; enableMagnifier() и disableMagnifier();
горячие клавиши («+» и «-» для масштаба и стрелки «←» «→» для перемещения карты); enableHotKeys() и disableHotKeys();
линейка; enableRuler() и disableRuler().

Подключение (отключение) встроенного элемента управления происходит вот так:

Пользовательский внешний элементы управления

Рассмотрим этот момент на примере создания маркера в центре карты. Исходная задача: поместить на карту кнопку, при клике на которую по центру карты создавался бы маркер. Я написал реализацию кода и прокомментировал все ключенвые моменты:

Ну вот, все готово. Смотрим рабочий пример:

Заключение

В этой статье мы научились вызывать карту (с различными параметрами) и настраивать ее внешний под наши нужды (в том числе создавать свои элементы управления).

А теперь несколько полезных ссылок:

Яндекс.Карт

Если у вас есть какие-то вопросы или замечания по статье, то задавайте, не стесняйтесь. До новых встреч!

Автор: Павел Марковнин

Сооснователь Временно.нет. Интересуется онлайн бизнесом, дизайном, юзабилити и клиентским программированием. Участвует в разработке нескольких интернет-проектов.

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях

Элемент управления — визуальный объект, связанный с картой и предназначенный для взаимодействия с пользователем.

В большинстве случаев элементы управления размещаются в области показа карты.

API карт включает в себя несколько встроенных наборов элементов управления (для маленьких, средних и больших карт) и предоставляет возможность расположить элементы управления произвольным образом, а также реализовать собственный элемент управления.

Элементы управления автоматически адаптируются под размер карты и параметры устройства.

Набор элементов управления, которые добавляются на карту при ее создании, указывается в конструкторе карты. По умолчанию будет подключен набор 'default', состоящий из элементов управления:

поисковая строка (searchControl)
выбор типа карты (typeSelector)
полноэкранный режим (fullscreenControl)
ползунок масштаба (zoomControl)
геолокация (geolocationControl)
кнопка "Пробки" (trafficControl)

Элементы управления программно связаны с объектом карты и хранятся в виде коллекции, ссылка на которую содержится в поле controls.

элементы управления Яндекс.Карт (controls)

Указываем элементы управления при инициализации карты

создаем карту указывая элементы управления

Наборы элементов управления

Набор	Описание	Пример
smallMapDefaultSet	Набор предназначенный для маленьких (менее 300 пикселей в ширину) карт	controls: ["smallMapDefaultSet"]
mediumMapDefaultSet или default	Набор предназначенный для стандартных (от 300 до 1000 пикселей в ширину) карт	controls: ["default"]
largeMapDefaultSet	Набор предназначенный для больших (более 1000 пикселей в ширину) карт	controls: ["largeMapDefaultSet"]

Элементы управления Яндекс.Карт

Пример	Элемент управления	Описание
	geolocationControl	Геолокации
	searchControl	Поисковая строка
	routeEditor	Редактора маршрута
	zoomControl	Ползунок масштаба
	fullscreenControl	Полноэкранный режима
	trafficControl	Пробки
	typeSelector	Тип карты
	rulerControl	Измерение расстояний

Изменение элементов управления карты после ее создания

Рассмотрим методы для изменения элементов управления карты.

рассмотрим методы для работа с элементами управления на примере zoomControl

Пример с элементами управлениями карты

- Кнопки "Геолокации" - Поисковая строка - Редактора маршрута - Ползунок масштаба - Кнопка "Переключения полноэкранного режима" - Кнопка "Пробки" - Кнопка "Тип карт" - Кнопка "Линейка"

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях

В предыдущем материале Параметры Яндекс.Карт мы с Вами рассмотрели параметры Яндекс.Карты которые необходимо задать во время инициализации карты и возможно изменять после ее создания.

В данном материале мы рассмотрим что такое поведения карты (behaviors).

Поведения карты это набор поведений, определяющих реакцию карты на действия, производимые пользователем.

при нажатой левой кнопке мыши и перемещении курсора карта сдвигается вслед за курсором.
при прокручивании колесом мыши происходит изменение масштабирования карты
при двойном щелчке левой кнопки мыши происходит изменение масштабирования карты
и т.д.

Если явно не указать набор поведений при инициализации карты, то ей присваивается набор поведений по умолчанию. Доступ к поведениям карты предоставляется полем behaviors. Так же как и параметры карты, поведения можно изменить после ее создания карты.

Указываем набор поведений при инициализации карты

создаем карту указывая набор поведений

Набор поведений Яндекс.Карт

Поведение	Описание
drag	перетаскивание карты с помощью мыши либо одиночного касания
dblClickZoom	масштабирование карты двойным щелчком кнопки мыши
leftMouseButtonMagnifier	масштабирование карты при выделении области левой кнопкой мыши
rightMouseButtonMagnifier	масштабирование карты при выделении области правой кнопкой мыши
multiTouch	масштабирование карты мультисенсорным касанием
routeEditor	редактор маршрутов
ruler	"Линейка", позволяет отмечать на карте точки и отображать расстояния между ними
scrollZoom	масштабирование карты колесом мыши
storage	Хранилище классов поведений карты. Добавление нового поведения на карту производится через это хранилище

Изменение поведений карты после ее создания

Рассмотрим методы для изменения поведений карты.

Метод	Описание
disable()	Выключает поведение
enable()	Включает поведение
isEnabled	Проверяет, включено ли поведение, возвращает Boolean
getParent()	Возвращает ссылку на родительский объект
setParent(parent)	Устанавливает родительский объект. Если передать значение null, то элемент управления будет только удален из текущего родительского объекта

рассмотрим методы для работа с поведениями на примере поведения drag

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

Вот как раз в этой статье я хочу показать, как это сделать. Давайте разбираться!

JS-код

На самом деле все очень просто, если заглянуть в доку и проявить смекалку. Начнем с JS

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

Тут на самом деле на помощь придет смекалка и знание некоторых особенностей работы карт. Мы можем залезть в код карты, взять класс нужного элемента и скрыть, это может сделать любой, но не все так просто. Классы карты состоят из числового префикса и самого названия класса.

Время от времени, при загрузке сайта, префикс меняется, и нетрудно догадаться, что через какое-то время ваш селектор по классу просто перестанет работать. Однако в CSS есть более умные селекторы, которые могут искать по кусочку css-класса, что нам и нужно, ведь буквенная часть класса неизменна. Пишем код:

Мы просто находим классы с упоминанием сopyrights-pane и скрываем их. important явно тут необязателен, но я решил добавить на всякий случай.

По большому счету, мы могли бы и другие контролы просто скрыть с помощью стилей, но тогда все равно ресурсы будут тратиться на загрузку этих скрытых элементов. Если уж API карт позволяет их скрыть "правильно" - стоит делать правильно.

Заключение

У меня на этом все, надеюсь вам было полезно) Поскольку новый формат блога просто не поддерживает комментарии (и да, я знаю что есть сторонние сервисы, но не хочу их подключать), если вам что-то непонятно или вы знает решение лучше - пишите через форму обратной связи. Я добавляю их не ко всем постам, а там, где это действительно оправдано.

До скорых встреч!

Об авторе блога

предложить исправления

ещё статьи на эту тему:

Полезное

Бесплатные макеты Figma для верстки сайта №4

Полезное

Бесплатные макеты Figma для верстки сайта №3

Полезное

Большая подборка плагинов на чистом JS для разных задач

Полезное

Бесплатные макеты Figma для верстки сайта №2

Полезное

Бесплатные макеты Figma для верстки сайта

этот блог о веб-разработке.

лайфхаки, полезные сервисы, софт, а так же внутренняя кухня фриланса. здесь каждый найдет для себя что-то полезное!

🤔 Что делаем: добавляем интерактивную карту Яндекса на свой сайт, чтобы показать схему проезда или где находится офис или пункт выдачи. Для этого будем использовать возможности эмбеда.

🕔 Время: 3 минуты.

✅ Понадобится: аккаунт в Яндексе.

👉 Коротко суть: у карт Яндекса есть специальный сервис, который помогает сделать интерактивный фрагмент карты местности и добавить туда нужные обозначения — например, где находится офис или как до него добраться.

Собираем карту

Перед нами откроется панель конструктора, где мы можем подготовить карту — добавить на неё нужные объекты и области:

Например, если нам нужно показать, где именно находится офис или точка выдачи заказов, используем кнопку «Метки» — она добавит метку на карту, а мы заполним её описание:

Меток на карту можно добавлять сколько угодно, а ещё настраивать их цвет и внешний вид. Кроме метки на карту можно нанести линии — например схему проезда — и области. За области отвечают «Многоугольники»:

Когда на карту добавлено всё, что нужно, нажимаем «Сохранить и продолжить».

Получаем код для вставки

Всё, что нужно от нас на этом этапе, — подобрать размеры и начальный масштаб карты. Так как нам нужна интерактивная версия карты, выбираем вариант «Вставить на сайт» и «Интерактивная карта»:

Когда масштаб выбран — нажимаем «Получить код карты» и копируем себе код вставки:

JavaScript или iframe?

Если у вас на сайте есть возможность вставить готовый код JavaScript, выбирайте его — это более современный и надёжный подход.

Иногда системы управления контентом «режут» такой код. Если у вас он не заработает, попробуйте iframe. Справедливости ради, если вам «зарезали» JS, то iframe, вероятнее всего, тоже зарежут.

Добавляем код на сайт

Последнее, что нам осталось сделать, — добавить код в нужное место на сайте. Например, чтобы добавить карту сразу после заголовка страницы, достаточно вставить код после тега :

Ограничение

Работоспособность карты зависит от сервисов Яндекса. Если что-то изменится, поменяется формат данных или сами сервисы Яндекса будут «лежать», то встроенный код работать не будет.

Правда, это довольно маловероятно, учитывая то, что Яндекс выдержал самую крупную в истории интернета DDoS-атаку. Кстати:

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Читайте также: