Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки

Автор Pavel Shevchuk
Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артем Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно в YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашка дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на. Ютюбе Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет. С вами. Артём Исламов мы продолжаем изучать основы Web разработки. Сегодня у нас урок про геокарты на сайте. Дело в том, что очень часто на одностраничных или многостраничный сайтах установить отметку на карте — это может быть сделано ради нескольких целей чтобы показать где находится офис компании чтобы показать как проехать к этому офису для этого используется навигация и так далее для использования. Яндекс Google или 2ГИС карта мы будем использовать в основном конструкторы, но и рассмотрим пример из песочницы. Яндекса Как настроить карту под себя при помощи джаваскрипт так как для новичков — это тема сложное я свечу и очень Core поэтому обязательным пунктом — это не будет являться. И так первое карты которые мы рассмотрим — это будет карты от. Яндекса нас пользоваться. Яндекс картами гораздо проще чем другими картами за счёт того, что у. Яндекса есть очень удобный конструктор карт поэтому мы ищем конструктор карт. Яндекс Он бесплатный не требует каких-то специальных навыков мы просто конструктор карт можем сохранять объекты давая им название например пример из видео урока, а здесь будет описание эту карту я использую для урока и здесь мы находим например. Курская 25. Казань Отлично мы можем выбрать цвет отметки формат этой отметки и даже изображение на этой отметки например вот так мы же выбрать размер. Зум и позицию карты. То есть сегодня настраивается без каких особых навыков вот таким вот образом мы сохраняем эту карту показываем где отметка должна находиться на нашей карте и настроек здесь несколько — это может быть карта которая будет двигаться на сайте — это может быть статическое карта которая не двигается она будет виде пенсия изображение есть ещё печатная на высоком разрешении поэтому пригодится больше печати как в качестве атласа мы будем использовать интерактивную карту причём есть возможность растянуть эту карту по ширине. То есть если у нас блок например занимает шесть колонок или четыре колонки мы просто устал параметр растянуть по ширине и карта становится резиновый по ширине единственный момент, что высота должна быть обязательно фиксированная должна быть обязательно в пикселях на нашем случае 400 пикселей получить код карты и вставляем в этот вот скрипт в любом месте где должна быть наша карта. Открой мои документы здесь у меня стандартная базовая разметка bootstrap есть контейнер и давайте я создам новый ролл внутри которого будет col-md скажем 6 на 2 и в первую md6 будет например адрес нашей компании где будет написан этот адрес. Например мужская 25 вот таким вот образом то есть — это будет TP внутри которого будет написано компании например. Телефон нашей компании и здесь будет написано например телефон 8 вот таким вот образом. Ну и здесь может быть множество информации не знаю заголовок 3 уровня нас найти очень распространенная ситуация на сайте его здесь мы вставим собственность Creed от. Яндекса и, что мы получим в результате перейдём на сайт и мы видим, что здесь есть информация как нас найти адрес компании и телефон и мы видим здесь интерактивную карту которые можно приближать удалять и выстраивать маршруты для этого собственно мне пришлось ничего такого изобретать то есть всё уже была готова и. Всё достаточно хорошо работает. При этом если вдруг у нас меняется разметка то есть карта занимает всю ширину то есть мы не ограничиваемся фиксированной шириной карты вот таким вот образом ещё один момент когда мы крутим колесико мыши на карте она скроллится — это не совсем удобно. Если например. Карта занимает всю ширину экрана то пользователь может очень сильно раздражается от того, что скроллится не сайт, а сама карта для того чтобы этого не было Scroll True параметры мы меняем на Scrolls и всё и карта не с движением мыши. То есть она не скроллится скролится страница. А чтобы увеличивать или уменьшать масштаб можно воспользоваться этими ползунками очень важный момент на которой я хочу обратить внимание нельзя закрывать отметку, что карта сделано с использованием индекса для того чтобы использовать. Яндекс карты бесплатно без.

0 комментариев
0

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