Автор оригинала: Vikrant Negi.
Создайте приложение для отслеживания местоположения в реальном времени, используя реагировать нативные и реагировать нативные карты
Отслеживает местоположение пользователя и рисует путь в качестве изменения местоположения
Если вы работали с raction arious, вы, должно быть, использовали или слышали о реактивных картах. Реагируйте нативные карты – это нативный пакет реагирования, который обеспечивает API Google Maps для реагирования на родных. Использование Static Google Maps очень распространено, но сегодня мы собираемся использовать одну из широко используемых функций Google Maps, отслеживание местоположения с использованием реакции на родомстве.
Найти проект repo здесь
Начиная
Начните с создания реагирования нативный проект и назовите его все, что вы хотите. Я использую React-Nature-Cli, но Create-raction-native-app Должно также работать просто хорошо.
react-native init locationTracking
Установка реактивных карт
Сначала загрузите библиотеку из НПМ:
npm install react-native-maps --save
Установка React-National-maps требует добавления кода в набор файлов iOS и Android. Следуйте за Установка Инструкции, предоставленные реактивными картами. После установки убедитесь, что проект строит успешно, прежде чем двигаться вперед.
Установка реактивных нативных карт не является простым заданием. Если вы делаете это в первый раз, я бы тщательно предложил пройти инструкцию по установке. Поверьте мне, это будет самая жесткая задача этого руководства. Используйте Google, если вы сталкиваетесь с любыми ошибками. 😅.
Использование реактивных карт
Отлично, теперь, когда вы успешно установили реактивные карты. Давайте перейдем к сочной части, где происходит настоящая магия. 😃.
Пусть сначала установите некоторые исходные состояния, которые будут использоваться для этого проекта.
constructor(props) {
super(props);
this.state = {
latitude: LATITUDE,
longitude: LONGITUDE,
routeCoordinates: [],
distanceTravelled: 0,
prevLatLng: {},
coordinate: new AnimatedRegion({
latitude: LATITUDE,
longitude: LONGITUDE
})
};
}
Мы будем использовать эти состояния позже в приложении, единственное, что интересует здесь Новый анимированный Регион Что поможет нам оживить наши маркеты, когда обновления местоположения.
Следите за изменениями местоположения
Теперь нам нужно будет получить координаты местоположения каждый раз, когда пользователь перемещается. Google Maps Geolocation API имеет Вид на видимость Метод, который, чему нам получат координаты местоположения всякий раз, когда они изменяются.
componentDidMount() {
this.watchID = navigator.geolocation.watchPosition(
position => {
const { coordinate, routeCoordinates, distanceTravelled } = this.state;
const { latitude, longitude } = position.coords;
const newCoordinate = {
latitude,
longitude
};
if (Platform.OS === "android") {
if (this.marker) {
this.marker._component.animateMarkerToCoordinate(
newCoordinate,
500
);
}
} else {
coordinate.timing(newCoordinate).start();
}
this.setState({
latitude,
longitude,
routeCoordinates: routeCoordinates.concat([newCoordinate]),
distanceTravelled:
distanceTravelled + this.calcDistance(newCoordinate),
prevLatLng: newCoordinate
});
},
error => console.log(error),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
}
Вид на видимость Дает нам информацию о местоположении пользователя всякий раз, когда она изменится. Затем мы используем ES6 Разрушение чтобы получить Широта и долгота от Position.Coords Отказ Кроме того, мы получим Координата, RouteCoordinates & DistanceReavelled от начального состояния.
Мы, чем создаем Newcoordinate Переменная, которая будет хранить эти новые обновленные координаты местоположения, которые мы получили от Position.Coords Отказ Теперь, когда мы получили координаты обновлений, мы будем оживить маркер к этим новым координатам. У Android и IOS имеют разные способы обращения с этим, поэтому мы будем использовать Платформа конкретный код справиться с этим.
if (Platform.OS === "android") {
if (this.marker) {
this.marker._component.animateMarkerToCoordinate(
newCoordinate,
500
);
}
} else {
coordinate.timing(newCoordinate).start();
}
Теперь пришло время обновить наши исходные состояния с новым.
this.setState({
latitude,
longitude,
routeCoordinates: routeCoordinates.concat([newCoordinate]),
distanceTravelled: distanceTravelled + this.calcDistance(newCoordinate),
prevLatLng: newCoordinate
});
Расчет пройденного расстояния
Мы использовали дистанционно известен Переменная состояния для хранения расстояния, пройденного пользователем. Для расчета этого расстояния мы создадим новую функцию Мальчдистанс это займет newlatlng как параметр и Prevlatlng как переменная состояния и вернется расстояние.
calcDistance = newLatLng => {
const { prevLatLng } = this.state;
return haversine(prevLatLng, newLatLng) || 0;
};
Глядя на эту функцию, которую вы, возможно, задаетесь вопросом, когда вычислили расстояние, получили столь комплекс. По-видимому, из-за кривизны Земли, расчетное расстояние с помощью широта и долгота не так просто Земля имеет некоторые кривые 😝.
Для расчета расстояния с использованием широта и долгота Нам нужно использовать Формула Haversine Отказ Если вы похожи на меня, кто борется с математикой 😅, есть надежда в форме Haversine Пакет NPM, который может помочь нам рассчитать расстояние, используя широта и долгота Отказ Установить Haversine Пакет NPM с использованием следующей команды.
npm install haversine
Рендеринг mapview.
С регион опоры, который принимает объект с координатами местоположения. Мы собираемся создать функцию, которая возвращает все необходимые необходимые данные.
getMapRegion = () => ({
latitude: this.state.latitude,
longitude: this.state.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
});
Теперь мы все информация о необходимости рендер карты.
{ this.marker = marker; }} coordinate={this.state.coordinate} />
Мы также использовали карты Google Polyline Чтобы нарисовать путь, как пользователь перемещается. Polyline имеет координировать реквизиты, которые принимают массив координат, которые мы можем получить от нашего RouteCoordinates Отказ Мы также установили Хидол чтобы мы могли видеть путь четко.
Далее, чтобы показать анимированный маркер, мы будем использовать Marker.animated Компонент, чтобы показать маркер на местоположении пользователей текущей позиции. Это имеет координировать опоры, которые получит координировать объект из государства.
Шоу пройдено расстояние
Наконец, чтобы показать расстояние, пройденное пользователем, мы настроим Вид с надлежащим стайлингом.
{parseFloat(this.state.distanceTravelled).toFixed(2)} km
Тестирование
Теперь, когда мы все необходимые предметы, находящиеся, мы, наконец, можем запустить наше приложение.
Чтобы проверить приложение на симуляторе iOS, мы будем использовать режим расположения, доступный в симуляторах iOS. После запуска приложения перейдите к Отладка > Расположение > Автосист драйв Настройка в симуляторе, чтобы включить эту функцию. Это должно привести к тому, что в чем ниже.
Для Android, это не так просто, поскольку эмуляторы Android не имеют встроенной функции для проверки изменений динамического местоположения. Чтобы проверить его, либо вы можете вручную изменить свою позицию, пройдя некоторое расстояние или вы можете использовать приложения для 3-го вечеринок. Я смог проверить это, используя GPS джойстик Приложение на Android.
Заключение
Мы успешно создали собственное приложение ract action, которое отслеживает местоположение пользователя и рисует путь. Он также может рассчитать расстояние, пройденное пользователем.
Я пропустил стили и какой-то другой код котельной, необходимый для этого приложения, но вы можете найти это в Github Repo здесь Отказ
Я надеюсь, что это поможет вам понять API Google Maps. Может быть, вы можете вдохновить от этого, чтобы построить что-то удивительное. Пожалуйста, не стесняйтесь оставлять какие-либо отзывы, я всегда ищу лучшие решения!