Использование Google Maps API в React приложении
Предисловие
Google предоставляет удобный API для работы с географическими картами на любой платформе (Android, iOS, Веб). При этом он сопровождается хорошей документацией с понятными и полезными примерами. Сейчас часто в проектах используется работа с картой, будь то Google Maps, либо Яндекс.Карты. Многие популярные JS-фреймворки имеют плагины для работы с ними.
О статье
Данная статья рассчитана на разработчиков, имеющих опыт работы с ReactJS и ES6, умеющих использовать импортированные компоненты, создавать свои, и знающих, что такое свойство и состояние react-компонента.
В статье речь пойдет об использовании Google Maps API в React приложении.
Рассмотрим react-плагин, предоставляющий компоненты для работы с Google картами, его установку, использование и некоторые нюансы работы. Разберем базовый пример отображения карты.
Описание плагина
React-google-maps - плагин, предоставляющий компоненты для отображения и работы с Google Maps (ссылка на GitHub). Данный плагин является оберткой над стандартным Google Maps API. Он предоставляет react-компоненты, использующие данное API. React-google-maps позволяет быстро и легко добавлять карту, маркеры на ней, прокладывать маршруты и другие вещи, предоставляемые Google Maps.
Установка
Для использования данного плагина необходимо:
- С помощью пакетного менеджера npm выполнить следующую команду в корне проекта (установка npm на Windows по ссылке)
npm install --save react-google-maps
- Получить ключ API. Он используется для аутентификации Google Maps Geocoding API приложений. Для получения ключа необходимо перейти по ссылке, в разделе “Аутентификация для стандартного API – ключи API” нажать кнопку “Получение ключа”, в появившемся окне, выбрать или создать приложение и нажать кнопку “Enable API”
- Импортировать скрипт вместе с ключом API для работы Google Maps API в главный HTML-файл (в параметр key вставить полученный ключ)
Использование
Рассмотрим пример отображения Google Maps в react-компоненте.
Для использования карты нужно импортировать следующие компоненты:
- withGoogleMap - функция для создания react-компонента. Предназначенного для отображения карты
- GoogleMap - непосредственно сам компонент карты, в который передаются нужные параметры
Далее необходимо создать компонент на основе импортированного GoogleMap с помощью функции withGoogleMap:
С помощью объекта props, в компонент передаются нужные параметры.
Для отображения данного компонента, ему необходимо передать следующее:
- containerElement - блок в который будет вставлена карта;
- mapElement - блок карты.
Дополнительные компоненты плагина
Кроме GoogleMap плагин react-google-maps предоставляет и другие компоненты для работы с картами (по ссылкам можно просмотреть примеры отображения компонентов и работы с ними):
- InfoBox - информационный блок;
- MarkerClusterer - маркеры-кластеры;
- Circle - отображение круговой области;
- DirectionsRenderer - отображение маршрута;
- DrawingManager - компонент, позволяющий рисовать некоторые фигуры на карте (круги, прямоугольники и др.);
- FusionTablesLayer - отображение точек на карте;
- GoogleMap - Google-карта;
- GroundOverlay - компонент, позволяющий добавлять наземное наложение на карту;
- InfoWindow - информационное окно (в основном используется для вывода информации по клику на маркер);
- KmlLayer - компонент для отображения KML данных;
- Marker - маркер;
- OverlayView - компонент, позволяющий накладывать компоненты;
- SearchBox - строка поиска;
- Polygon - выделение области по координатам (многоугольник);
- Polyline - добавление линии по координатам;
- Rectangle - выделение области (прямоугольник);
- StreetViewPanorama - отображение панорамы;
- TrafficLayer - отображение загруженности дорог;
- HeatmapLayer - отображение карты интенсивности.
Некоторые нюансы работы с компонентами
Рассмотрим некоторые нюансы работы с компонентами.
Получение данных с карты
Суть проблемы:
Необходимо получить некоторые данные с карты, которые не предоставляет тот или иной компонент.
Решение:
Для использования некоторых данных с карты необходимо получить объект карты с помощью параметра onMapLoad и занести его в состояние либо переменную компоненты:
В дальнейшем, для получения данных с карты, будет использоваться данный объект.
Проблема получения координат видимого региона карты после их изменения
Суть проблемы:
При использовании слушателей onDrag, onDragStart, onDragEnd может оказаться, что во время активации слушателя программно определяемые с помощью функции getBounds координаты области видимости карты не будут совпадать с реально отображаемой областью видимости. В этом легко убедиться если поставить маркер в угол карты, координаты которого нужно получить с помощью функции getBounds. Как следствие, это отражается в погрешностях работы программы либо ее неправильной работе.
Решение:
Для получения координат видимого региона используется функция getBounds объекта map, получаемый после загрузки карты. После этого можно получить широту и долготу нужного угла карты (например, getNorthEast().lat() и getNorthEast().lng() - получение широты и долготы (координат) верхнего правого угла региона карты):
Компонент GoogleMap может работать с такими слушателями, как onDblClick, onClick, onDrag и другие. Любой такой слушатель может быть использован для получения координат региона, однако следует помнить при каких именно условиях срабатывает тот либо иной слушатель. Использование неправильного слушателя может привести к получению неправильных координат. Поэтому, для получения точных координат видимого региона, при их изменении, лучше использовать слушатель onBoundsChanged.
Кастомизация отображения маркера
Суть проблемы:
Не подходит стандартное отображение маркера. Необходимо отобразить в нем некоторую информацию, что не позволяет стандартное поведение маркера.
Решение:
Для того чтобы кастомизировать стандартный маркер либо отобразить в нем некоторую информацию используется label, связанный с маркером. Для этого, в стандартный компонент Marker, передаются дополнительные параметры:
- markerWithLabel - с помощью данного параметра, указывается, что маркер будет отображаться вместе label. Принимает функцию для отображения маркера с label (window.MarkerWithLabel);
- labelClass - задание класса для label;
- labelContent - добавление содержимого в label;
- labelStyle - задание стилей для label.
Для скрытия стандартного маркера используется параметр opacity (opacity={0})
Альтернативы
Существуют и другие react-компоненты для работы с Google Maps API. Среди них можно выделить:
- google-map-react - это компонент, использующий небольшой набор Google Maps API. Позволяет отображать любой компонент React на Google карте. Кроме того, он может отображать компоненты карты в браузере, даже если Google Maps API не загружен. Он использует внутренний, настраиваемый алгоритм наведения.
- react-google-map (не путать с описанным в данной статье react-google-maps) - компонент для отображения Google карты вместе с маркерами.
- google-maps-react - декларативный react-компонент для отображения Google Maps, с использованием “ленивой” подгрузки зависимостей, поиска текущего местоположения.
Предпочтительно использование react-google-maps. В данном плагине реализовано большое количество react-компонентов, используемых в Google Maps, каждый компонент имеет большое количество параметров для удобного его использования, в документации у каждого компонента есть наглядный пример.
Заключение
Рассмотренный в данной статье react-плагин позволит легко использовать возможности Google Maps API в своем проекте. Рассмотренные примеры и нюансы работы с компонентами позволят избежать проблем работы с данным плагином.
Формирование отчетов в BIRT Завершен проект “Веб-приложение для просмотра личных дел сотрудников и студентов”