Блог

Я работаю над приложением, основанным на картах, с react native и Firebase в качестве серверной части, и я застрял с функцией Nearby users, я использую карты react native для геолокации и react native firebase.

Теперь в моем приложении у меня есть два типа пользователей (конечный пользователь, поставщик), и при регистрации я сохраняю данные о них, содержащие их местоположение (широта, длина), на данный момент я работаю с приложением конечного пользователя, и я сохраняю некоторые поддельные данные о поставщиках (местоположении), и яне имею представления о том, как получить всех поставщиков поблизости от моего местоположения,

Вот моя база данных [Поставщики]

Вот мой код для получения текущего местоположения для пользователей, и я попробовал несколько запросов, чтобы получить ближайших провайдеров, но это падение:(, я могу легко получить всех провайдеров, но бот поблизости so ..

 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;
  

Если кому-то интересно помочь мне, вот мой
репозиторий