Яндекс карты конструктор отключить скролл
Обновлено: 25.04.2024
Сегодня мы начнем знакомство с апи Яндекс.Карт. Судя по вашим комментариям, мои статьи по 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-атаку. Кстати:
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Читайте также: