如何解决基于半径反应原生的过滤器标记
我正在尝试根据半径显示标记,但我无法为此开发逻辑。我的标记位置来自 firestore geopoint。我已成功根据 Firestore 中的类别过滤标记,但无法按最大距离半径过滤
我的问题:我不知道如何使用半径属性以及将该属性放在哪里以及如何根据半径过滤标记
class mapView extends Component {
constructor() {
super()
this.state = {
users:[],initialPosition: {
latitude: -6.64064,longitude: 106.8273983,latitudeDelta: 0,longitudeDelta: 0
},}
}
getLocation(){
Geolocation.getCurrentPosition(
(position) => {
var lat = position.coords.latitude
var long = position.coords.longitude
var initialRegion ={
latitude: lat,longitude: long,latitudeDelta: LATITUDE_DELTA,longitudeDelta: LONGITUDE_DELTA,}
this.setState({initialPosition: initialRegion})
},(error) => {
// See error code charts below.
console.log(error.code,error.message);
},{ enableHighAccuracy: true,timeout: 15000,maximumAge: 10000 }
);
}
fetchRequests(){
this.subscriber = firebase.firestore()
.collection("users").onSnapshot(docs => {
let users = []
docs.forEach(doc => {
users.push(doc.data())
})
this.setState({users})
console.log(users)
})
}
componentDidMount() {
this.props.fetchUser();
this.fetchRequests();
this.getLocation();
}
render() {
return (
<View style={styles.container}>
<MapView
showsUserLocation={true}
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={this.state.initialPosition}>
{this.state.users.filter(element => element.golDarah === this.props.currentUser.golDarah && element.geo_point.latitude
!== this.props.currentUser.geo_point.latitude && element.locationOn === true )
.map((user,idx) => <Marker
key={idx}
coordinate={{latitude: user.geo_point.latitude,longitude: user.geo_point.longitude}}
>
<Callout>
<View style={{height: 0.1 * windowHeight()}}>
<Text>Nama: {user.name}</Text>
<Text>Golongan Darah: {user.golDarah}</Text>
<TouchableOpacity onPress={()=>{Linking.openURL(`${user.noHp}`)}}>
<Text>No HP:{user.noHp}</Text>
</TouchableOpacity>
</View>
</Callout>
</Marker>)}
</MapView>
</View>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。