Главная » Статьи » Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

От автора: в этой статье мы поговорим о том, как делаются сайты на Vue JS. В частности, как мы реализовали интерфейс сайта для аренды и покупки недвижимости в живописной, средиземноморской Мальте. Сайт называется RBMalta.

Если не слышали о нем, посмотрите пример по этому проекту. Посмотрим, как нам удалось реализовать описанную выше функциональность.

Требования

Интерфейс

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

карты с маркерами;

фильтры;

фильтр результатов в форме списка элементов.

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

Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

Фрейм карты (видимая часть) тоже фильтр: в список идут только свойства, расположенные в данный момент на карте.

Кастомизация

Второе – крайне важна была адекватная кастомизация. По требованиям клиента система должна была уметь кастомизировать карту и элементы на ней. Например, возможность отображать маркеры в форме кружочка со случайным центром. Цель такой функции – прятать точное расположение недвижимости и показывать только двор.

Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

Пользовательский опыт (UX)

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

Поэтому нашей команде разработке нужно было реализовать плавный и высоконагруженный интерфейс с адекватной кастомизацией UI и сложной системой управления событиями.

Как же мы решили все эти задачи? Что более важно, какие инструменты мы для этого выбрали?

Если вкратце, мы выбрали Vue.JS и Google Maps (вы это уже знаете по названию статьи). По нашему опыту эта технология в сочетании с сервисом google идеально подходят для таких задач.

Реализация

По требованиям карта на сайте должна была уметь:

показывать маркеры в форме кружочков, подгоняя общий дизайн в плане цвета/вида;

показывать кластер маркеров (группировать близкорасположенные свойства в одно с числом внутри);

(по клику на маркер) открывать окно с информацией о недвижимости, прикрепленной к маркеру;

(по клику на кластер) открывать окно со списком домов в кластере, где пользователь может кликать по свойствам в модальном окне;

обновлять кластеры и маркеры каждый раз при получении ответа с новыми данными от сервера.

Как мы реализовали интерфейс высоконагруженного сайта с помощью Vue.JS и Google Maps

Помимо этого, нужно было проверить, что Google API используется не так часто (чтобы снизить нагрузку на сервер и остаться на бесплатном тарифе).

Первое, что мы сделали – инициализировали карту и подключили ее к заранее написанному коду, в котором она развертывается. Мы написали функцию, которая создает и возвращает объект карты с заданными параметрами:

function initMap(id, zoom, center) { center = center || {lat: defaultLat, lng: defaultLng}; zoom = zoom || 14; var map = new google.maps.Map(document.getElementById(id), { center: center, zoom: zoom, maxZoom: 16, minZoom: 10, mapTypeControlOptions: { position: google.maps.ControlPosition.BOTTOM_RIGHT }, fullscreenControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: mapStyles, clickableIcons: false }); return map;
} 

В коде сверху функция принимает следующие аргументы:

id – идентификатор элемента DOM, к которому крепится карта.

zoom – масштаб карты по умолчанию;

center – координаты центра карты.

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

Простой пример получения объекта marketClusterer:

var markerCluster = new MarkerClusterer(map, initialMarkers); 

Конструктор принимает следующие элементы:

map - объект google maps;

initialMarkers  — массив начальных маркеров.

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

Библиотека node-MarkerWithLabel помогла реализовать маркеры в форме кружочков. Пример создания такого маркера:

var marker = new MarkerWithLabel({ position: markerPosition, map: map, labelAnchor: new google.maps.Point(30, 40), labelClass: "marker-style"
}); 

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

var infoWindow = new google.maps.InfoWindow(); 

Как выглядит событие клика на маркер:

marker.addListener('click', function() { infoWindow.setContent(propertyNode); infoWindow.open(map, marker);
}); 

Клик по маркеру устанавливает контент объекта infoWindow и передает созданный элемент DOM с информацией о недвижимости в объект. Метод infoWindow.open() открывает окно. После этого карта и маркер передаются как аргументы.

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

google.maps.event.addListener(markerCluster, 'clusterClick', handler) 

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

При получении данных с сервера создается массив маркеров. К этому массиву добавляется обработчик, который, в свою очередь, передается в метод markerCluster.addMarkers(). Для этого мы использовали библиотеку MarkerWithLabel.

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

Используя вышеописанные техники, мы можем реализовать конструктор интерфейса, ответственный за общую ориентацию карты. Интегрировать его можно с помощью Vue.JS. Далее о том, как это сделать.

Есть Vue метод mounted. Для него нужно инициализировать Vue компонент. Добавим следующий код в этот компонент:

this.map = initMap('map-rentbuy', zoom, center);
this.markerCluster = new MarkerCluster(this.map); this.map.addListener('dragend', function () { // some logic
}); this.map.addListener('zoom_changed', function () { // some logic
}); 

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

Но это не все. В объекте markerCluster мы реализовали метод addMarkersToCluster, в который передается результат с сервера. В этом методе создается массив маркеров, который затем передается напрямую в объект. В то же время объект карты map позволяет определять:

текущий центр карты (this.map.getCenter())

коэффициент масштабирования (this.map.getZoom())

координаты верхнего правого и нижнего левого углов карты (this.map.getBounds()) – нужны для передачи текущей видимой области на сервер

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

Заключение

Придерживаясь лучших практик веб-разработки, мы смогли реализовать для клиента замечательный сайт. Говоря о Vue.JS, он зарекомендовал себя, как довольно универсальная технология, позволяющая:

создавать легкий в использовании способ управления элементами карты.

Достигать гибкости и легкости в разработке. Во фреймворке Vue.JS есть все необходимое для реализации высоконагруженного интерфейса.

Реализовывать отличных UX. Интерфейс сайта user-friendly и живой одновременно.

Если искали технологию, позволяющую делать то же самое, Vue.JS – отличный вариант.

Источник: https://expertise.jetruby.com/

Редакция: Команда webformyself.