Вы также можете прочитать это здесь, на моем личном веб-сайте:

https://yildiz.dev/2017/05/20/react-native-maps-with-google-directions-api/

Мы должны использовать внешний сервис для рисования реальных направлений между двумя (или более) точками на карте. Для React Native я использовал как собственные карты реакции, так и Google Directions Api.

React Native Maps

Благодаря ребятам из airbnb у нас есть react-native-maps: полный набор компонентов React для карт. Вы можете проверить функции и подробности в репозитории Github:



airbnb / react-native-maps
react-native-maps - компонент React Native Mapview для iOS + Android github.com



Служба API Google Directions

Google предоставляет API маршрутов, который рассчитывает маршруты между местоположениями. Поскольку это служба на основе API, SDK для любой платформы не существует (по крайней мере, официально).

Перед началом кодирования

Ответ JSON, возвращаемый Api Directions, содержит ключ с именем overview_polyline, который представляет собой закодированную ломаную линию и выглядит следующим образом:

cxftF{xcpDEt@Kj@Gf@E`C@~@XtAJb@Jh@@J@D?F@HA\Ip@Ox@KZKh@?PAB@D?H?B@F@B?F@@@DBBBD@@B@@@B@D@B@D?L@v@FFBXDpFxA|@l@^d@z@~BVz@Nf@Ph@DNFLLXVZxArAh@b@l@d@r@l@pAzAl@z@PXBF@FBD@F@F?H?D@JCLCHA@A@A@A@C@IBQBKAYIWSMKKMGKOOMIo@D]FSBi@JSDUAs@Qm@WcBk@s@U[K_@Sq@e@OUMWKQMUKMIGMGICC?E?K?E@QHUNm@Xq@XYLa@Ls@LYDW@SDGBG@IHS\Wl@EFA@A@CDEDEBG@C@[?e@Ca@KQGa@QSC_@?Y@k@Fu@As@?U@I@I@IBEBQH]Lq@\WLuBx@i@Vy@TaANK@E@QAICUKIGMM]e@OWISEOCSAMAG

Это данные, которые мы собираемся использовать для создания нашего маршрута на карте. Но сначала нам нужно его расшифровать. Есть небольшая библиотека от команды MapBox под названием Polyline:



mapbox / polyline
кодирование и декодирование полилинии в javascript github.com



Мы можем использовать эту библиотеку для кодирования / декодирования ломаных линий.

Пример приложения

Создайте новое собственное приложение React:

$ react-native init RnDirectionsApp

Внутри папки RnDirectionsApp установите react-native-mapsи polyline:

$ npm install react-native-maps @mapbox/polyline --save
$ react-native link

Вы можете найти более подробное руководство по установке здесь, в Github Repo.

Теперь у нас есть пустое, но готовое приложение, ориентированное на реагирование. Давайте сначала посмотрим на наш getDirections метод:

Просто этот метод:

  • Получает данные маршрутов из Google (line 4)
  • Декодирует закодированные данные ломаной линии (line 6)
  • Преобразует декодированные данные ломаной линии в список объектов (line 7)
  • Обновляет state новыми coords данными

Теперь мы можем нарисовать наш маршрут на карте. Для этого мы можем использовать MapView.Polyline из react-native-maps. В нашем render методе:

Более подробную информацию об использовании Mapview.Polyline вы можете найти здесь.

А это полная версия index.ios.js:

Надеюсь это поможет. Пожалуйста, оставьте комментарий для любого отзыва

ОБНОВЛЕНИЕ: Брэм Ван Дамм создал компонент на основе этого сообщения. Выглядит многообещающе. Вы можете проверить это здесь:



bramus / react-native-maps-направлениях
react-native-maps-direction - Компонент направлений для` response-native-maps` github.com