Я работаю над приложением, основанным на Картах , с реакцией нативного и Firebase в качестве бэкэнда, а я застрял с Близлежащими пользователями. Функция ,
Я использую карты нативной реакции для геолокации и реакцию нативной базы огня.
Теперь В моем приложении у меня есть два типа пользователей ( Конечный пользователь, поставщик ), и при регистрации я сохраняю данные о них, содержащие их местоположение (широта, долгота) ,
в настоящее время я работаю с приложением для конечных пользователей и сохраняю некоторые фальшивые данные о поставщиках (местоположение), и у меня нет идеи о том, как найти всех поставщиков поблизости от моего местоположения,
Вот моя БД [Провайдеры]
![Provider](https://i.stack.imgur.com/pKSti.png)
Вот мой код, чтобы получить текущее местоположение для пользователей, и я пробовал несколько запросов, чтобы получить ближайших провайдеров, но это осень :(, я могу легко получить всех провайдеров, но бот рядом
итак ..
import React, { Component } from 'react';
import MapView, { Marker } from 'react-native-maps';
import { View, Text, StyleSheet, Dimensions, PermissionsAndroid } from 'react-native';
let { width, height } = Dimensions.get('window');
const LATITUDE = 50.78825;
const LONGITUDE = 51.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = 0.0421;
class Map extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
width: width,
marginBottom: 1,
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
};
}
requestLocationPermission = async () => {
const LocationPermission = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
// , {
// 'message': 'This App needs to Access your location, OK?'
// }
)
if (LocationPermission === PermissionsAndroid.RESULTS.GRANTED) {
navigator.geolocation.getCurrentPosition(
//Will give you the current location
position => {
const longitude = position.coords.longitude;
const latitude = position.coords.latitude;
this.setState({
region: {
latitude,
longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
})
},
error => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID = navigator.geolocation.watchPosition(position => {
console.log(position);
const longitude = position.coords.longitude;
const latitude = position.coords.latitude;
this.setState({
region: {
latitude,
longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
});
});
}
}
async componentDidMount() {
await this.requestLocationPermission()
};
render() {
const { region } = this.state;
return (
<View style={styles.container}>
<MapView
style={[styles.map, { width: this.state.width }]}
style={StyleSheet.absoluteFill}
onMapReady={() => console.log(this.state.region)}
showsUserLocation
region={region}
loadingEnabled={true}
// style={StyleSheet.absoluteFill}
textStyle={{ color: '#bc8b00' }}
containerStyle={{ backgroundColor: 'white', borderColor: '#BC8B00' }}
>
<Marker
coordinate={this.state.region}
title="Hello Title"
description="description..."
/>
</MapView>
{/* <Text>{this.state.region.latitude}</Text> */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
padding: 30,
flex: 1,
alignItems: 'center'
},
map: {
position: 'absolute',
zIndex: -1,
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default Map;
Если кто-то хочет мне помочь, вот мой
Repo