Написать пост

Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях

Аватарка пользователя Volga-Volga
Volga-Volga

Рассказали о библиотеке для React на основе Yandex MapKit. Она поможет заменить Google Maps, ведь их больше нельзя оплатить.

10К открытий11К показов

Сейчас при разработке мобильных приложений Google Карты лучше не использовать. У этого две причины: сервисы Google нельзя оплатить и есть шанс, что их могут заблокировать в России.

В текущей ситуации можно попробовать перейти на Яндекс Карты. Команда разработки 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:

Google Maps – всё? Переходим на Яндекс Карты в React Native приложениях 1

Разработка приложения ведется на языке 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>
    );
  }
}

Методы карты

Этим методом вы можете менять положение камеры относительно карты, чтобы вместить конкретные маркеры. Также можно получать местоположение камеры и строить маршруты.

			import React from 'react';
import YaMap, { Marker } from 'react-native-yamap';

class Map extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
            onPress={() => {
              // переместить камеру, чтобы вместить все маркеры
              this.map.current?.fitAllMarkers();
            }}
            style={{ width: 40, height: 40, backgroundColor: 'green' }}
         />
        <TouchableOpacity
            onPress={() => {
              // получить координаты текущей позиции
              console.log(this.map.current?.getCameraPosition());
            }}
            style={{ width: 40, height: 40, backgroundColor: 'green' }}
         />
        <YaMap
          ref={this.map}
          style={{ flex: 1 }}>
            <Marker point={{lat: 50, lon: 50}} />
            <Marker point={{lat: 53, lon: 53}} />
            <Marker point={{lat: 50, lon: 53}} />
        </YaMap>
      </View>
    );
  }
}

Запрос маршрутов

Метод 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);

Геоподсказки

Геоподсказки нужны для того, чтобы облегчить поиск нужного адреса:

			import {Suggest} from 'react-native-yamap';

const find = async (query: string) => {
  const suggestions = await Suggest.suggest(query);

  // suggestion = [{
  //  subtitle: "Москва, Россия"
  //  title: "улица Льва Толстого, 16"
  //  uri: "ymapsbm1://geo?ll=37.587093%2C55.733974&spn=0.001000%2C0.001000&text=%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F%2C%20%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D1%83%D0%BB%D0%B8%D1%86%D0%B0%20%D0%9B%D1%8C%D0%B2%D0%B0%20%D0%A2%D0%BE%D0%BB%D1%81%D1%82%D0%BE%D0%B3%D0%BE%2C%2016"
  // }, ...]

  const suggestionsWithCoards = await Suggest.suggestWithCoords(query);

  // suggestionsWithCoards = [{
  //  subtitle: "Москва, Россия"
  //  title: "улица Льва Толстого, 16"
  //  lat: 55.733974
  //  lon: 37.587093
  //  uri: "ymapsbm1://geo?ll=37.587093%2C55.733974&spn=0.001000%2C0.001000&text=%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F%2C%20%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0%2C%20%D1%83%D0%BB%D0%B8%D1%86%D0%B0%20%D0%9B%D1%8C%D0%B2%D0%B0%20%D0%A2%D0%BE%D0%BB%D1%81%D1%82%D0%BE%D0%B3%D0%BE%2C%2016"
  // }, ...]

  // After searh session is finished
  Suggest.reset();
}

Как использовать

1. Установите зависимость Яндекс Карт с вашим приложением через пакетный менеджер

2. После этого в Личном кабинете Яндекса нужно получить API Ключ

Олимпиада для школьников «Технокубок 2020»
tproger.ru

3. Инициализируйте библиотеку, используя свой API Ключ

Заключение

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

В статье мы рассмотрели, как интегрировать карты в свое кроссплатформенное приложение на React Native. Сейчас это актуально: разработчики ищут, как сменить картографический сервис. Но если вы знаете другое решение, поделитесь в комментариях, обязательно обсудим!

Следите за новыми постами
Следите за новыми постами по любимым темам
10К открытий11К показов
Также рекомендуем
Гайд по чистому коду: учимся писать тесты
Гайд по чистому коду: учимся писать тесты
Покрываем интеграционным тестом небольшой сервис: объясняем, как сделать это локально и с помощью тест-контейнеров.
Angular 17: что нового
Angular 17: что нового
Расшифровка видео об обновлениях в Angular 17, в котором разработчики рассказали о новых фичах фреймворка и изменениях в синтаксисе и рендеринге.
CSS Grid и Flexbox: эволюция макетов в веб-дизайне
CSS Grid и Flexbox: эволюция макетов в веб-дизайне
Окунёмся в историю введения и развития CSS Grid и Flexbox, рассмотрим влияние на современные веб-макеты, преимущества и недостатки.
Как стать айтишником
Как стать айтишником
О том, как стать айтишником, для начинающих IT-специалистов и тех, кто хочет сменить профессию рассказали руководители IT-компаний.