Яндекс конструктор карт убрать элементы управления
Обновлено: 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().
Подключение (отключение) встроенного элемента управления происходит вот так:
Пользовательский внешний элементы управления
Рассмотрим этот момент на примере создания маркера в центре карты. Исходная задача: поместить на карту кнопку, при клике на которую по центру карты создавался бы маркер. Я написал реализацию кода и прокомментировал все ключенвые моменты:
Ну вот, все готово. Смотрим рабочий пример:
Заключение
В этой статье мы научились вызывать карту (с различными параметрами) и настраивать ее внешний под наши нужды (в том числе создавать свои элементы управления).
А теперь несколько полезных ссылок:
-
АПИ Яндекс.Карт; и клуб разработчиков — частенько что-нибудь интересное проскакивает.
Если у вас есть какие-то вопросы или замечания по статье, то задавайте, не стесняйтесь. До новых встреч!
Автор: Павел Марковнин
Сооснователь Временно.нет. Интересуется онлайн бизнесом, дизайном, юзабилити и клиентским программированием. Участвует в разработке нескольких интернет-проектов.
Часто вижу вопросы как студентов, так и иных верстальщиков о том, что дизайнер подготовил тот или иной вид карты в макете, и ему нужно следовать. Ну например, делают вообще пустую карту с одним только маркером, убирая абсолютно все элементы на ней.
Вот как раз в этой статье я хочу показать, как это сделать. Давайте разбираться!
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 и левую кнопку мыши. Чтобы повернуть или наклонить карту, перемещайте мышь.
Чтобы вернуть карту в исходное положение, один раз нажмите на внешнее кольцо компаса.
На мелких масштабах наклон сбрасывается автоматически.
Изменить масштаб карты
Вы можете изменить масштаб карты с помощью:
Кнопок и .
Колеса мыши: чтобы уменьшить масштаб, прокрутите его на себя, чтобы увеличить — от себя.
Кнопок мыши: двойной щелчок левой кнопкой на карте увеличит масштаб карты, правой — уменьшит.
Правой кнопки мыши:
Нажмите на карту.
Не отпуская кнопку, переместите мышь в нужном направлении.
При движении мыши на карте будет выделена область.
Выделенная область переместится в центр карты, ее масштаб при этом увеличится.
Измерить расстояние
Измерить расстояние на карте можно по прямой или по ломаной линии, повторяя линии улиц.
В правом верхнем углу страницы нажмите кнопку .
Чтобы отключить функцию, нажмите эту кнопку повторно.
Выберите начальную точку для измерения.
Вы можете корректировать полученную линию. Для этого перетащите любую точку на другое место.
Если нажать на линию в произвольном месте, там появится новая точка, которую также можно перемещать по карте.
Чтобы удалить линию целиком, нажмите возле конечной точки.
Чтобы выключить линейку и удалить всю линию, нажмите возле конечной точки.
Напечатать карту
Нажмите и выберите Печать . Откроется окно предварительного просмотра.
Читайте также: