С тех пор, как я опубликовал свой последний проект JavaScript, некоторые студенты хотели знать, как я создал свою карту. Итак, здесь я собираюсь разбить на несколько простых шагов то, что я сделал для этого. Если вы хотите увидеть оригинальное демо моего проекта, вы можете посмотреть его здесь.
Сначала я огляделся в поисках карты, которая выглядела так, как будто она хорошо подходит для того, что я имел в виду. Потрясев дерево Google некоторое время, я нашел sandiego.org, веб-сайт с большим количеством бесплатных рекламных материалов для путешествий, а также идеальную карту.
Затем, уже приняв решение о своих походах, которые я хотел показать, я наложил кнопки на карту и разместил их именно там, где я хотел.
Для кнопок я дал каждой из них уникальный идентификатор, чтобы я мог играть с их индивидуальным позиционированием в CSS. Я также дал им класс «точка», чтобы я мог вызывать их позже в своем JavaScript.
Я позиционировал каждый поход, используя свойства «сверху» и «слева», и использовал метод проб и ошибок, пока они не оказались в том месте, которым я был доволен.
В моей функции JavaScript я использовал querySelectorAll для сбора своих точек, которые затем преобразовал из Nodelist в массив.
Зная теперь, что я имел дело с двумя массивами, один из которых был заполнен моими кнопками, а другой — моими туристическими объектами. Я упростил себе задачу и заранее упорядочил их. Я добавил цикл for, создающий прослушиватель событий для каждой кнопки. На каждой итерации я передавал текущее значение «i» отдельной функции, которая соединяла каждую кнопку с соответствующим объектом из моих походов.
Как только я заставил функции работать, я вернулся и добавил эффект наведения в свой CSS. Как разработчик, важно, чтобы ваш пользовательский интерфейс чувствовал себя отзывчивым, и это добавляло приятный штрих.
И вот оно! Я надеюсь, что объяснение моего пошагового процесса поможет другим, кто учится делать забавные, отзывчивые пользовательские интерфейсы. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать!
