Яндекс Карты в React Native вместо Google Maps — открытый код для мобильных приложений
Кому полезно: доставкам, агрегаторам такси, торгово-розничным сетям, интернет-магазинам с пунктами выдачи, сетевым общепитам.
Если при разработке мобильного приложения на React Native вы используете Google Maps, то у вас есть две проблемы:
- оплата невозможна;
- Google могут заблокировать в России.
Вам нужно решение, которое подойдёт для разных задач: установки маркеров, геокодинга, построения маршрутов.
Попробуйте Яндекс Карты, ниже мы поделимся готовым решением для вашей команды разработки.
Сильные стороны Яндекса
- Детализация. На карте России и СНГ больше адресов и они точнее.
- Одна цена на все продукты: Static API, MapKit SDK, JavaScript API и Геокодер.
Как всё случилось
Три года назад мы разрабатывали клиентское приложение, где использовался Yandex MapKit.
Yandex MapKit – это программная библиотека картографических данных
Создавать приложение решили на React Native, чтобы сэкономить время, но это потребовало адаптировать MapKit к iOS и Android. Результат работы – библиотека с открытым исходным кодом “react-native-yamap”, который используем в разработке и сегодня.
В течение трёх лет Яндекс Карты менялись. К нам приходили другие заказчики с новыми задачами для MapKit: нужно было реализовать геокодинг, научить код строить маршруты или проставлять кастомные маркеры. С наращиванием этих запросов библиотека усложнялась.
Так появилась версия кода 4.0.0
Готовое решение React Native-Yandex Map
Репозиторий доступен на GitHub – там выложен бесплатный открытый код для разработчиков на React Native.
Что нужно, чтобы использовать код у вас в приложении:
1. Установить зависимость с Яндекс Картами через пакетный менеджер
2. Получить API Ключ в Личном кабинете Яндекса
3. Инициализировать библиотеку с этим API Ключом
Возникли трудности?
Напишите нам, если нужны дополнительные фичи, мы можем сделать их в свободное от работы время и выложить в открытый доступ. Горят сроки по проекту? Возьмём запрос на доработку библиотеки в рабочее время.
Если у вас нет своей команды и в приложении нужны Яндекс Карты, мы готовы взять проект в работу.
спасибо, попробуем! очень актуальная тема сейчас. буквально прямо сейчас 4 приложения в очереди на смену картографического сервиса
Если будут вопросы по нашему коду или в целом, пишите в комментах. Подскажем
Приветствую!
В прошлом году купил плагин (Вордпресс) для которого необходим ключ Google Maps, естественно ключ мой отвалился как и у других в России. Хотел бы узнать можно место Google Maps использовать к примеру Яндекс.
Вот этот плагин: https://codecanyon.net/item/quickcab-woocommerce-taxi-booking-plugin/23798539
Здравствуйте. Передали вопрос разработчикам, напишем, как будет ответ
Написали в личные сообщения
Не могли бы вы тоже прислать в личное как на woordpress заменить эти карты Googla на Яндекс
Просто огнище 🔥🔥🔥 Спасибо Вам огромное. Уже в 2 проекта добавил вашу либу 👍
Как использовать балуны? Либо какой-то способ сделать callout/tooltip?
Передали вопрос разработчикам, скоро появится ответ
Ответ отдела разработки:
Оставьте запрос на добавление функционала в issue на гитхабе. Рассмотрим в свободное от работы время.
Есть бага открытия карт со смещением в ios. Соответственно функция центра карты так же отрабатывает со смещением. Баг воспроизводится через раз(версия 4.0.15)
Добрый вечер. Подскажите, нашли решение?
Да, как раз в заведенной проблеме репозитория есть предложенные решения (https://github.com/volga-volga/react-native-yamap/issues/97). Но это всё равно не полноценное решение, ждём фикса.
Хорошо, с понедельника отправим запрос разработчикам, пофиксят. Отпишемся вам, когда будет готово
Issue такое есть(https://github.com/volga-volga/react-native-yamap/issues/97). Пока прибег к решению из комментария к нему
Есть вариант использования с Expo ?
Здравствуйте, в рабочие дни передадим вопрос разработчикам. Ответим вам
Доброе утро. Вот что ответили в отделе разработки:
Экспо не позволяет подключать сторонние нативные зависимости
Только если сделать eject. Инструкция https://docs.expo.dev/expokit/eject/
Подключил карту, но она не отображается. Что делать?
Здравствуйте, сейчас передадим вопрос в отдел разработки
Вот что ответили: https://github.com/volga-volga/react-native-yamap/issues/45
Если будут еще вопросы, пишите сразу на ГитХаб, так удобнее)
Здравствуйте! Подскажите пожалуйста, пишет ошибку Unable to resolve module 'react-native/Libraries/Image/resolveAssetSource.js'. Перепробовал все , что было в интернете( к несчастью, "гайдов" было мало ).Ошибку выдает на этапе подключения( то есть я делаю импорт Yamap from 'react-native', а после этого сразу же появляется ошибка )
Здравствуйте, я не нахожу двухточечную линию от линии a до линии b. у этого пакета есть такая функция?
Добрый день! У меня небольшая проблема, при первом рендере компонента <Marker/>, картинки маркеров (передаваемые любым возможным способом, через source, через children), не отображаются. При повторной перезагрузке приложения все ок. В чем может быть проблема?
Добрый день, проблему лучше добавить в issue, мы стараемся отвечать в свободное время по некоммерческим вопросам
Также мы готовы осуществлять поддержку проекта в рамках какого либо проекта в рамках коммерческого договора в первом приоритете/с выделенной командой под задачи
Как сделать добавление маршрута на карту?