Разработване на карта в реално време с маркер в 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, който приема region като опора. Стойността на региона ще приеме 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.

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

За да добавим маркер динамично, трябва първо да извлечем местоположението на потребителя, като географска ширина и дължина и след това да ги предадем на координатната опора на компонента на маркера. Expo предоставя пакет, наречен expo-location, който помага на програмиста да извлече местоположението на потребителя. Този пакет използва geoLocation – API на браузъра за извличане на местоположението на потребителя в браузъра. Можете също да използвате пакета react-native-geolocation npm, за да получите местоположението на потребителя. За да извлечете местоположението на потребителя от устройството, трябва първо да поискате разрешение от потребителя, както правят повечето приложения.

Първо поискахме разрешение от потребителя за прихващане на неговото/нейното местоположение. След като потребителят даде разрешение на нашето приложение, ние можем да зададем тези координати на нашия обект за местоположение и да ги предадем на координатната опора на нашия маркер.

Заключение

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

До следващия път. Приятен ден, хора.

Повече съдържание на plainenglish.io