En

JazzTeam Software Development Company

Agile Java Development

Использование 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 install --save react-google-maps

 

Использование

Рассмотрим пример отображения Google Maps в react-компоненте.

Для использования карты нужно импортировать следующие компоненты:

Далее необходимо создать компонент на основе импортированного GoogleMap с помощью функции withGoogleMap:

С помощью объекта props, в компонент передаются нужные параметры.

Для отображения данного компонента, ему необходимо передать следующее:


 

 Дополнительные компоненты плагина

Кроме GoogleMap плагин react-google-maps предоставляет и другие компоненты для работы с картами (по ссылкам можно просмотреть примеры отображения компонентов и работы с ними):

 

Некоторые нюансы работы с компонентами

Рассмотрим некоторые нюансы работы с компонентами.

Получение данных с карты

Суть проблемы: 

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

Решение:

Для использования некоторых данных с карты необходимо получить объект карты с помощью параметра onMapLoad и занести его в состояние либо переменную компоненты:


В дальнейшем, для получения данных с карты, будет использоваться данный объект.

Проблема получения координат видимого региона карты после их изменения

Суть проблемы: 

При использовании слушателей onDrag, onDragStart, onDragEnd может оказаться, что во время активации слушателя программно определяемые с помощью функции getBounds координаты области видимости карты не будут совпадать с реально отображаемой областью видимости. В этом легко убедиться если поставить маркер в угол карты, координаты которого нужно получить с помощью функции getBounds. Как следствие, это отражается в погрешностях работы программы либо ее неправильной работе.

Решение:

Для получения координат видимого региона используется функция getBounds объекта map, получаемый после загрузки карты. После этого можно получить широту и долготу нужного угла карты (например, getNorthEast().lat() и getNorthEast().lng() - получение широты и долготы (координат) верхнего правого угла региона карты):

Компонент GoogleMap может работать с такими слушателями, как onDblClick, onClick, onDrag и другие. Любой такой слушатель может быть использован для получения координат региона, однако следует помнить при каких именно условиях срабатывает тот либо иной слушатель. Использование неправильного слушателя может привести к получению неправильных координат. Поэтому, для получения точных координат видимого региона, при их изменении, лучше использовать слушатель onBoundsChanged.

Кастомизация отображения маркера

Суть проблемы:

Не подходит стандартное отображение маркера. Необходимо отобразить в нем некоторую информацию, что не позволяет стандартное поведение маркера.

Решение:

Для того чтобы кастомизировать стандартный маркер либо отобразить в нем некоторую информацию используется label, связанный с маркером. Для этого, в стандартный компонент Marker, передаются дополнительные параметры:

Для скрытия стандартного маркера используется параметр opacity (opacity={0})

Альтернативы

Существуют и другие react-компоненты для работы с Google Maps API. Среди них можно выделить:

Предпочтительно использование react-google-maps. В данном плагине реализовано большое количество react-компонентов, используемых в Google Maps, каждый компонент имеет большое количество параметров для удобного его использования, в документации у каждого компонента есть наглядный пример.

Заключение

Рассмотренный в данной статье react-плагин позволит легко использовать возможности Google Maps API в своем проекте. Рассмотренные примеры и нюансы работы с компонентами позволят избежать проблем работы с данным плагином.

 

, , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *