Vue.JS + Google Maps: реализация интерфейса

Дата публикации:

Задача

В этой статье мы опишем опыт использования Google Maps API для разработки интерфейса сервиса по работе с недвижимостью. И сразу к делу.

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

Первое, на что стоит обратить внимание — это пользовательский интерфейс (UI). Хорошо, если нам удастся скомбинировать в одном окне:

  • карты с маркерами
  • фильтры
  • результаты фильтрации в виде списка элементов

Результат фильтрации должен быть релевантным, как на карте, так и в списке элементов. Другими словами отфильтрованные элементы должны быть представлены и на карте, и в виде списка.

Vue.JS+API

Второе — это кастомизация. А конкретно: возможность кастомизации элементов на карте и самой карты. Например, нам нужно реализовать маркеры в виде круговых областей со смещенным центром. Это необходимо для того чтобы скрыть реальное расположение недвижимости и показать лишь примерный район.

Vue.js+API-1

Третье и самое важное — это UX. Как правило, подобные интерфейсы содержат множество элементов фильтрации (и не только), обеспечивающих обновление информации. Поэтому содержание клиентской части сервиса подвержено частым изменениям. На них влияют различные факторы. Например, изменение состояния фильтров, перемещение по карте, масштабирование карты и т.д.

Таким образом, нам необходимо обеспечить гармоничную реализацию довольно нагруженного интерфейса, кастомизацию, согласно проекту дизайна и управление сложной системой событий. Что же мы делаем? Вооружаемся фреймворком Vue.JS и Google Maps. Как показала практика, выбранный стек технологий позволяет нам реализовать все поставленные задачи.

Реализация

Сразу отметим, что перед началом работы с картой и маркерами, мы получили несколько определенных требований:

  • Маркеры — области
  • Кластеры маркеров
  • При нажатии на маркер открывать информационное окно по недвижимости, прикрепленное к этому маркеру
  • При нажатии на кластер открывать информационное окно со слайдером недвижимости в этом кластере
  • Набор кластеров и маркеров на карте должен обновляться при каждом ответе сервера с приходом новых данных

Vue.js+API-2

Итак, первое, что нам нужно — это инициализировать карту, привязав ее к заранее сверстанному блоку, где она будет развернута.

В нашем случае мы можем реализовать функцию, формирующую и возвращающую объект карты по заданным параметрам:

В приведенном примере функция принимает в качестве аргументов:

  1. id — идентификатор dom элемента, к которому монтируется карта
  2. zoom — степень увеличения на карте по умолчанию
  3. center — координаты центра карты

Полученные данные передаются конструктору карты в виде объекта опций с дополнительными полями. Для управления кластерами мы используем библиотеку Marker Clusterer. Именно в ее конструктор мы передаем полученный объект карты.

Простой пример получения объекта markerCluster выглядит так:

Конструктор принимает:

  1. map — объект гугл карты
  2. initialMarkers — массив с начальными маркерами

В итоге мы получаем удобный инструмент для работы с кластерами. С помощью методов markerCluster.addMarkers(markers) и markerCluster.clearMarkers() мы можем управлять набором маркеров и кластеров на карте. markerCluster сам определяет нужно ли создавать кластер в зависимости от текущей степени увеличения и набора маркеров.

Для создания маркера — области мы использовали библиотеку node-MarkerWithLabel. Пример создания маркера:

Теперь нам необходимо кастомизировать класс marker-style с помощью CSS и таким образом получить необходимый маркер в виде условной области.

Для того же, чтобы при клике на маркер выводилась информация по недвижимости, нам необходимо создать  объект InfoWindow. Мы используем следующий конструктор:

А обработка события клика по маркеру происходит таким образом:

Теперь при клике на маркер мы устанавливаем контент объекта infoWindow, передавая ему сформированный DOM элемент с информацией о собственности и отображаем окно с помощью метода infoWindow.open(). Далее объект карты и маркер передаются в качестве аргументов.

При клике на кластер макреров в объекте infoWindow нам нужно сформировать слайдер. Для этого, в первую очередь, нужно добавить обработчик клика по кластеру с помощью такого выражения:

В обработчике handler, с помощью метода markerClusterer.getMarkers(), мы можем получить информацию о содержащихся  в кластере маркерах. А на ее основе построить DOM элемент со слайдером, который и передадим объекту infoWindow. По аналогии с тем, как это было реализовано для одиночного маркера.

Таким образом, получая данные с сервера, мы создаем массив маркеров, добавляя им обработчик клика, и передаем этот массив в метод markerCluster.addMarkers(). В этом нам помогает библиотека MarkerWithLabel.

Объект markerCluster добавляет маркеры на карту и, при необходимости, создает кластеры маркеров. При клике на них отображается список элементов недвижимости в виде слайдера.

Используя вышеупомянутые примеры, мы можем реализовать конструктор интерфейса, отвечающий за работу карты в целом. А еще мы можем запросто интегрировать его с Vue.js.

Демонстрируем. Существует vue метод mounted.  Он вызывается по окончании инициализации vue компонента. Именно в него мы добавляем подобный код:

Таким образом, как карта, так и построенный на ее основе объект, реализующий интерфейс для управления кластерами, будут доступны из любого vue метода.

Поехали дальше. Внутри объекта markerCluster мы реализовали метод addMarkersToCluster, которому мы передаем результат обращения к серверу. В нем же формируется массив маркеров и передается непосредственно объекту кластера. А используя объект карты map, мы можем определить:

  • текущий центр карты (this.map.getCenter())
  • степень увеличения (this.map.getZoom())
  • координаты правого верхнего и левого нижнего углов карты (this.map.getBounds())  — они нужны для передачи на сервер текущего поля видимости при запросе данных

Передавая идентичные данные кластеру и vue методу, отвечающему за отображение актуальных элементов собственности, мы получаем синхронизацию объектов в списке и элементов на карте. Примеры интерфейса:

Вывод

Что мы получили в итоге?

  1. Удобный инструмент для управления контентом на карте. Он реально упрощает работу с подобным типом интерфейсов.
  2. Гибкость и удобство разработки. Здесь нам помог фреймворк Vue.js, обеспечивающий скорость и эффективность реализации высоконагруженных интерфейсов.
  3. Отличный UX. Например, если пользователь хочет поделиться ссылкой на текущую выборку, вместе с обычными данными мы передаем параметры карты. И даже разворачиваем интерфейс вместе с теми параметрами карты, которыми хотел поделится пользователь.

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

Мы Крым Диджитал

С 2015 года мы предоставляем полный цикл услуг мобильной и веб-разработки клиентам из различных отраслей и разных стран.

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

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

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

Крым Диджитал приняла участие в стратегической сессии

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.
Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства.

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании.

Следующий курс намечен на август. Не пропусти анонс записи!