Разработка карты в реальном времени с маркером в React Native

Сегодня мы будем работать с картами в React Native. Я уже рассматривал статьи «Начало работы с Expo React Native» и «Добавление SplashScreen в Expo React Native». Я буду использовать ту же настройку репозитория для добавления карт и маркера в реальном времени.

Here is the link to articles => https://javascript.plainenglish.io/getting-started-with-expo-react-native-615d32c72b5?source=your_stories_page-------------------------------------

Начиная

React Native предоставляет библиотеку для добавления карт в приложение. react-native-maps. Это предоставляет множество функций, воспроизводящих процесс добавления карт в Vanilla Javascript или React. Идите вперед и добавьте эту библиотеку, используя приведенную ниже команду.

yarn add react-native-maps

react-native-maps экспортировать компонент по умолчанию MapView, который принимает регион в качестве реквизита. Значение региона будет принимать объект JSON местоположения, который будет выглядеть так, как показано ниже.

const region = {
  latitude: string,
  longitude: string,
  latitudeDelta: string,
  longitudeDelta: string
}

Затем объект JSON необходимо передать в качестве реквизита компоненту MapView, предоставляемому react-native-maps.

<MapView region={region} />

Добавление маркера

react-native-maps предоставляет компонент Marker, который будет потомком MapView. Компонент Marker принимает основные реквизиты, такие как координата, заголовок и описание. Где координата — это объект с широтой и долготой в качестве ключевых значений. Сначала мы устанавливаем этот объект координат вручную, а позже мы будем устанавливать их, используя текущее местоположение пользователя или динамически. Кроме того, мы можем изменить маркер по умолчанию с помощью нашего пользовательского маркера в виде изображения или простых векторных значков. Я буду использовать @expo/vector-icons библиотеку для добавления пользовательского маркера к моему маркеру. Кроме того, убедитесь, что объект координат имеет числовой тип ключей широты и долготы.

const region ={ latitude: Number, longitude: Number }
return (
   <MapView>
     <Marker coordinate={region} />
   </MapView>
)

Давайте изменим внешний вид маркера, используя в качестве маркера наши пользовательские векторные иконки.

<FontAwesome name=”map-marker” size={40} color=”#B12A5B” />

Используйте приведенный выше компонент векторных значков, предоставленный @expo/vector-icons .

Динамическое добавление маркера

Чтобы добавить маркер динамически, нам нужно сначала получить местоположение пользователя, такое как широта и долгота, а затем передать их в координатную опору компонента Marker. Expo предоставляет пакет под названием expo-location, который помогает разработчику получить местоположение пользователя. Этот пакет использует geoLocation — API браузера для получения данных о местоположении пользователя в браузере. Вы также можете использовать пакет react-native-geolocation npm для получения местоположения пользователя. Чтобы получить местоположение пользователя с устройства, вам нужно сначала запросить разрешение у пользователя, как это делает большинство приложений.

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

Вывод

Добавление карт на карты React Native сейчас не так сложно, я до сих пор помню 3 года назад, когда я работал с ванильным JavaScript и картами Google, где мне нужно было интегрировать карты Google из документов Google Developer Console, это не было легкой прогулкой для начинающих. Разработчики. Но время от времени все улучшается и меняется. react-native-maps do поставляется с другими функциями, такими как добавление фигур на карты, таких как круги, полилинии и т. д. Проверьте его документацию.

До скорого. Добрый день, Люди.

Дополнительные материалы на plainenglish.io