Я пишу этот пост, чтобы прояснить, как рендерить ломаные линии вместе с маршрутами Google Map. В этом примере я покажу, как визуализировать маршрут от парка Вашингтон-сквер до Юнион-сквер в Нью-Йорке.

Прежде чем мы начнем, нам нужно будет установить следующие библиотеки в наш проект React Native: response-native-maps, @ mapbox / polyline, react-native-google-maps-routes, native-base.

Шаг 1. Отрисовка карт React Native

После установки указанных библиотек мы начнем с рендеринга карты react-native. Сначала нам нужно будет импортировать response из React, Stylesheet и View из react-native, MapView из react-native-maps, Polyline из @ mapbox / polyline, кнопку и значок из native-base и getDirections из react-native-google- карты-направления вроде так:

Затем мы создадим компонент класса и дадим ему состояние со свойством координат. Обратите внимание, что если намерение состоит в том, чтобы отобразить сцепленные полилинии, лучше всего, если мы определим свойство координат с пустым массивом, например:

Теперь мы визуализируем карту и добавим маркер для обозначения нашего конечного пункта назначения. Чтобы отобразить карту, нам нужно будет указать ей начальное положение, в котором указаны долгота, широта, дельта долготы и координаты дельты широты. Точно так же для маркера также потребуются координаты широты и долготы. Для целей этого примера координаты Вашингтон-сквер-парка и Юнион-сквер были даны на карте и маркеру соответственно. Для объяснения этих компонентов, а также других компонентов, доступных для карт реагирования, обратитесь к этому репозиторию Github.

Шаг 2. Маршруты на карте Google

После рендеринга карты мы можем перейти к отображению маршрута с помощью карт Google, но сначала нам нужно будет получить ключ API Карт Google, инструкции о том, как получить ключ, можно найти здесь. Как только вы получите ключ, мы получим указания, вызвав функцию handleGetDirections из response-native-google-maps-routes. Для более подробного объяснения возможностей библиотеки react-native-google-maps-routes обратитесь к этому репозиторию Github.

По сути, функция handleGetDirections работает, устанавливая начальную позицию («источник» в приведенном ниже коде), пункт назначения и метод поиска маршрута, то есть пешком, на велосипеде, на автомобиле или общественном транспорте. В конце нашей функции мы вызовем функцию getDirections из google-maps-api, которая принимает начальное местоположение и параметр конечного местоположения. Продолжая наш пример, начальное местоположение было определено с координатами парка Вашингтон-сквер, а конечное местоположение было определено с координатами Юнион-сквер. В этом примере пешеходные маршруты будут отображаться для маршрута после вызова метода handleGetDirections. Таким образом, нам нужно будет привязать handleGetDirections к конструктору.

Далее мы определим getDirections function. Обязательно привяжите это к нашему конструктору, так как мы будем вызывать функцию в методе жизненного цикла componentDidMount, например:

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

  • Получает данные маршрутов из Google - обязательно добавьте свой API-ключ в URL-адрес
  • Декодирует закодированные данные ломаной линии
  • Преобразует декодированные данные ломаной линии в список объектов
  • Обновляет state новыми coordinates данными

Шаг 3. Нарисуйте маршрут на карте

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

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

После того, как вы закончите эти шаги, карта Манхэттена должна отобразиться с синей ломаной линией между парком Вашингтон-сквер и Юнион-сквер. Кроме того, после нажатия значка человека карты Google появятся либо в браузере (если карты Google не установлены на вашем телефоне), либо в приложении и начнут перемещать вас к Юнион-сквер.