Dev*_*vAS 5 javascript firebase reactjs react-native firebase-realtime-database
我正在开发一个基于Maps的应用程序,以 React Native 和 Firebase 作为后端,并且我被附近的用户功能所困扰,我正在使用 React Native 地图进行地理定位,并使用 React Native Firebase。
现在在我的应用程序中,我有两种类型的用户(最终用户,提供商),注册时我保存了有关他们的数据包含他们的位置(纬度,经度),目前我正在使用最终用户应用程序,并且我保存一些有关提供商(位置)的伪造数据,并且我不知道如何获取我所在位置附近的所有提供商,
这是我的数据库 [提供商]
这是我的代码,用于向用户获取当前位置,我尝试了一些查询来获取附近的提供商,但现在是秋天:(,我可以轻松获取所有提供商,但对附近的机器人进行操作,所以..
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;
Run Code Online (Sandbox Code Playgroud)
如果有人有兴趣帮助我,这里是我的 仓库
| 归档时间: |
|
| 查看次数: |
2458 次 |
| 最近记录: |