Разработка карты в реальном времени с маркером в 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