No Image

Яндекс карта на всю ширину сайта

СОДЕРЖАНИЕ
0 просмотров
10 марта 2020

Добрый день. Сегодня хочу написать небольшую заметку о том, как сделать Яндекс карту адаптивной. Часто спрашивают о том, как это реализовать на landing page, вот и будет готовый материал.

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

Где height=240 — высота, а w >

Для того, чтобы сделать карту адаптивной (по ширине), нам достаточно написать так: w >

Но это был лишь самый простой случай, часто, наша карта помещается в специальный div, например, с классом map, который имеет определенные размеры.

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

Как я уже говорил, при помощи медиазапросов, мы легко сможем сделать Яндекс карту адаптивной.

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

Важно! По условиям использования Яндекс.Карт нельзя закрывать логотип и копирайт.

Для начала понадобится png картинка-маска с прозрачностью:

Далее выводим карту на странице:

В кодиспекторе, в HTML разметке карты нужно найти элемент с классом ymaps-inner-panes или подобным (от версии к версии API он меняется). Например в 2.1 он называется ymaps-2-1-74-inner-panes .

К этому элементу нужно добавить CSS псевдо-элемент :after с изображением маски.

Пример 1. Яндекс Карта

Документацию по созданию Яндекс Карты можно посмотреть по ссылке https://tech.yandex.ru/maps/doc/jsapi/1.x/dg/tasks/quick-start-docpage

Читайте также:  Nvidia titan v vs rtx 2080 ti

Ниже приведен пример Яндекс Карты и коды для ее создания.

1. Создайте два файла placemark.html и placemark.js (коды приведены ниже).

2. Цифры в квадратных скобках (в коде placemark.js) означают географические координаты объекта. Введите вместо этих данных координаты своих объектов.

Строка center: [56.84, 60.63] означает геометрический центр карты в географических координатах.

Строка zoom: 12.2 означает коэффициент приближения карты, методом перебора параметра необходимо подогнать под свою карту.

Как определить географические координаты объекта?
Открываем Яндекс Карту, в строке поиска вводим адрес и справа видим информацию об объекте, включая географические координаты.

Комментировать
0 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector