Сейчас при разработке мобильных приложений Google Карты лучше не использовать. У этого две причины: сервисы Google нельзя оплатить и есть шанс, что их могут заблокировать в России.
В текущей ситуации можно попробовать перейти на Яндекс Карты. Команда разработки VVDEV расскажет, как это сделать.
Никита Сироткин
Исполнительный директор IT-компании VVDEV
Сильные стороны Яндекса:
Детальное покрытие России и стран СНГ.
Адреса более точные, лучше проработаны маршруты.
Одна цена на Геокодер, JavaScript API, Static API и MapKit SDK.
Есть решение, которое позволяет строить маршруты, отображать маркеры и реализовывать геокодинг: библиотека с открытым исходным кодом «react-native-yamap» с использованием Yandex MapKit.
Как использовать Yandex Mapkit в React Native приложении?
Mapkit — это нативный sdk, который без проблем интегрируется в приложения на языках:
Swift / Objective С для iOS;
Kotlin / Java для Android.
На изображении представлена архитектурная схема React Native:
Разработка приложения ведется на языке JavaScript, а Mapkit готов для использования в нативных приложениях.
Чтобы использовать Яндекс Карты в React Native приложении, необходимо реализовать нативный модуль (Native Module на схеме). Этот модуль сможет общаться с JavaScript кодом приложения, чтобы выводить на экран необходимые компоненты (карту, маркеры, полигоны и прочее) и оповещать приложение о событиях (нажатия, зум, поворот карты).
Примеры кода
Маркеры, области и линии
Реализуем маркеры, области и линии с гибкой настройкой каждого примитива.
Например, выделение области:
import React from 'react';
import YaMap, { Circle, Polyline } from 'react-native-yamap';
class Map extends React.Component {
render() {
// будет изображена зеленая толстая линия
// в красном круге радиусом 300 метров
return (
<YaMap
style={{ flex: 1 }}
>
<Circle fillColor='red' center={{lat: 50, lon: 50}} radius={300} />
<Polyline
strokeColor='green'
strokeWidth
points={[
{lat: 50, lon: 50},
{lat: 50, lon: 20},
{lat: 20, lon: 20},
]}/>
</YaMap>
);
}
}
Ещё один пример с Marker, этот компонент вы будете наверняка использовать в своих проектах:
import React from 'react';
import YaMap, { Marker } from 'react-native-yamap';
class Map extends React.Component {
render() {
// будет изображено 3 маркера, один красным квадратом
return (
<YaMap style={{ flex: 1 }}>
<Marker
// один с вашей картинкой
source={yourImageSourse}
point={{lat: 50, lon: 50}}
/>
<Marker
// один с красным квадратом
point={{lat: 53, lon: 53}}
>
<View style={{width: 20, height: 20, backgroundColor: 'red'}}/>
</Marker>
<Marker
// один невидимый
visible={false}
point={{lat: 50, lon: 53}}
/>
</YaMap>
);
}
}
Методы карты
Этим методом вы можете менять положение камеры относительно карты, чтобы вместить конкретные маркеры. Также можно получать местоположение камеры и строить маршруты.
Метод findRoutes из YaMap — отдельная фича, которая позволяет получить информацию о возможных маршрутах. Будет полезно для приложений с самокатами или такси.
// получить маршрут для нескольких видов транспорта по точкам, если yourVehicles пустой, то метод будет аналогичен findPedestrianRoutes
this.map.current?.findRoutes(yourPoints: Point[], yourVehicles: Vehicles[], callback: (event: RoutesFoundEvent) => void);
// получить маршрут для общественного транспорта по точкам
findMasstransitRoutes(yourPoints: Point[], callback: (event: RoutesFoundEvent) => void): void;
// получить маршрут для пешеходов по точкам
findPedestrianRoutes(yourPoints: Point[], callback: (event: RoutesFoundEvent) => void): void;
// получить маршрут для личного транспорта по точкам
findDrivingRoutes(yourPoints: Point[], callback: (event: RoutesFoundEvent) => void): void;
Геокодер
Получайте координаты конкретного адреса, либо адрес по координатам:
import { Geocoder } from 'react-native-yamap';
Geocoder.init('API_KEY');
// вернет адрес
Geocoder.geoToAddress(geo: Point);
// вернет координаты
Geocoder.addressToGeo(address: string);
Геоподсказки
Геоподсказки нужны для того, чтобы облегчить поиск нужного адреса:
3. Инициализируйте библиотеку, используя свой API Ключ
Заключение
В текущей ситуации разумно подготовиться к тому, что гугл карты так и нельзя будет оплатить для использования в мобильных приложениях. На российском рынке Яндекс — доступная альтернатива, которая дает лучшую детализацию и не уступает своему конкуренту по функционалу.
В статье мы рассмотрели, как интегрировать карты в свое кроссплатформенное приложение на React Native. Сейчас это актуально: разработчики ищут, как сменить картографический сервис. Но если вы знаете другое решение, поделитесь в комментариях, обязательно обсудим!
JS-библиотек более тысячи — они постоянно обновляются, а многие из них создаются сообществом. Рассказываем о наиболее актуальных для разработки анимаций на сайте.