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

Обновлено: 23.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().

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

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

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

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

Заключение

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

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

Яндекс.Карт

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

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

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

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

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

JS-код

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

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

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

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

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

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

Заключение

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

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

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

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

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

Полезное

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

Полезное

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

Полезное

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

Полезное

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

Полезное

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

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

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

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

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

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

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

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

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

Вы можете создать карту со своими объектами, например схему проезда до вашего дома, дачи или офиса.

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

Многоугольники, в том числе с внутренним контуром — дома, коттеджные поселки, озера и т. д.

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

Подробнее об этом инструменте см. в справке Конструктора карт.

Вы можете создать карту со своими объектами, например схему проезда до вашего дома, дачи или офиса.

Чтобы создать или отредактировать свою карту:

Нажмите на изображение профиля. Если вы не авторизованы, нажмите кнопку и авторизуйтесь.

Чтобы открыть Конструктор карт, в боковом меню выберите Мои карты .

На карте вы сможете нарисовать:

Метки — подъезды, пункты встречи и т. д.

Линии — улицы, маршруты, границы и т. д.

Многоугольники, в том числе с внутренним контуром — дома, коттеджные поселки, озера и т. д.

Созданную вами карту вы можете:

Также вы можете сохранить объекты вашей карты в виде файла, который можно использовать, чтобы:

импортировать нужные точки в программы-навигаторы;

использовать совместно с API Яндекс Карт;

просматривать и сохранять данные в других программах (например, в Google Earth).

По умолчанию на сервисе отображается карта вашего города или региона.

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

Изменить вид карты

В правом верхнем углу страницы нажмите кнопку и выберите нужный режим отображения Яндекс Карт:

Схема — схематическое изображение дорог, домов и т. д.

Спутник — снимок местности, сделанный из космоса.

Гибрид — снимок местности, сделанный из космоса, дополненный информацией с карты: названиями улиц, адресами и др.

Режим отображения не влияет на остальные функции карты: поиск, построение маршрутов или перемещение карты.

Повернуть или наклонить карту

Поворачивать и наклонять карту можно только в режиме Схема .

Вы можете управлять наклоном и поворотом карты с помощью:

кнопки в виде компаса .

Чтобы наклонить карту, нажмите 3D . Чтобы сбросить наклон карты, нажмите 2D .

Чтобы повернуть карту, вращайте внешнее кольцо компаса, удерживая левую кнопку мыши.

Красная стрелка на компасе указывает на север;

мыши и клавиатуры.

Нажмите и удерживайте клавишу Ctrl и левую кнопку мыши. Чтобы повернуть или наклонить карту, перемещайте мышь.

Чтобы вернуть карту в исходное положение, один раз нажмите на внешнее кольцо компаса.

На мелких масштабах наклон сбрасывается автоматически.

Изменить масштаб карты

Вы можете изменить масштаб карты с помощью:

Колеса мыши: чтобы уменьшить масштаб, прокрутите его на себя, чтобы увеличить — от себя.

Кнопок мыши: двойной щелчок левой кнопкой на карте увеличит масштаб карты, правой — уменьшит.

Правой кнопки мыши:

Нажмите на карту.

Не отпуская кнопку, переместите мышь в нужном направлении.

При движении мыши на карте будет выделена область.

Выделенная область переместится в центр карты, ее масштаб при этом увеличится.

Измерить расстояние

Измерить расстояние на карте можно по прямой или по ломаной линии, повторяя линии улиц.

В правом верхнем углу страницы нажмите кнопку .

Чтобы отключить функцию, нажмите эту кнопку повторно.

Выберите начальную точку для измерения.

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

Если нажать на линию в произвольном месте, там появится новая точка, которую также можно перемещать по карте.

Чтобы удалить линию целиком, нажмите возле конечной точки.

Чтобы выключить линейку и удалить всю линию, нажмите возле конечной точки.

Напечатать карту

Нажмите и выберите Печать . Откроется окно предварительного просмотра.

Измените масштаб карты и переместите ее, если потребуется.

Letter (216 × 279 мм);

Legal (216 × 356 мм).

портретная ─ длинная сторона листа располагается по вертикали;

альбомная ─ длинная сторона листа располагается по горизонтали.

При необходимости напишите комментарий. Этот текст будет напечатан под картой.

Выберите принтер и параметры печати.

Вы можете также напечатать карту, на которую нанесете собственные объекты. Подробнее см. в разделе Конструктор карт.

Переместить карту

По умолчанию на сервисе отображается карта вашего города или региона.

Изменить вид карты

В правом верхнем углу страницы нажмите кнопку и выберите нужный режим отображения Яндекс Карт:

Схема — схематическое изображение дорог, домов и т. д.

Спутник — снимок местности, сделанный из космоса.

Режим отображения не влияет на остальные функции карты: поиск, построение маршрутов или перемещение карты.

Повернуть или наклонить карту

Поворачивать и наклонять карту можно только в режиме Схема .

Вы можете управлять наклоном и поворотом карты с помощью:

кнопки в виде компаса .

Чтобы наклонить карту, нажмите 3D . Чтобы сбросить наклон карты, нажмите 2D .

Чтобы повернуть карту, вращайте внешнее кольцо компаса, удерживая левую кнопку мыши.

Красная стрелка на компасе указывает на север;

мыши и клавиатуры.

Нажмите и удерживайте клавишу Ctrl и левую кнопку мыши. Чтобы повернуть или наклонить карту, перемещайте мышь.

Чтобы вернуть карту в исходное положение, один раз нажмите на внешнее кольцо компаса.

На мелких масштабах наклон сбрасывается автоматически.

Изменить масштаб карты

Вы можете изменить масштаб карты с помощью:

Кнопок и .

Колеса мыши: чтобы уменьшить масштаб, прокрутите его на себя, чтобы увеличить — от себя.

Кнопок мыши: двойной щелчок левой кнопкой на карте увеличит масштаб карты, правой — уменьшит.

Правой кнопки мыши:

Нажмите на карту.

Не отпуская кнопку, переместите мышь в нужном направлении.

При движении мыши на карте будет выделена область.

Выделенная область переместится в центр карты, ее масштаб при этом увеличится.

Измерить расстояние

Измерить расстояние на карте можно по прямой или по ломаной линии, повторяя линии улиц.

В правом верхнем углу страницы нажмите кнопку .

Чтобы отключить функцию, нажмите эту кнопку повторно.

Выберите начальную точку для измерения.

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

Если нажать на линию в произвольном месте, там появится новая точка, которую также можно перемещать по карте.

Чтобы удалить линию целиком, нажмите возле конечной точки.

Чтобы выключить линейку и удалить всю линию, нажмите возле конечной точки.

Напечатать карту

Нажмите и выберите Печать . Откроется окно предварительного просмотра.

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