使用条件标记反应本机地图

Question

我正在使用 firebase 开发应用程序并反应原生地图，我有

this.props.currentUser[
    name, 
    bloodType
]

和

this.state.users[
    name,
    bloodType
]

我想显示例如当前用户是否有血型：A，我想在血型为 A 和 AB 的地图用户中显示标记。目前我只能显示 if currentUser: A 那么 users: A 我无法显示 AB。这是我到目前为止所做的。

<MapView

{this.state.users.filter(element => {
              let bloodCheck = this.props.currentUser.bloodType === element.bloodType  && element.geo_point.latitude 
            !== this.props.currentUser.geo_point.latitude && element.geo_point.longitude 
            !== this.props.currentUser.geo_point.longitude && element.locationOn === true ;
            let distance = this.calculateDistance(this.props.currentUser.geo_point.latitude, this.props.currentUser.geo_point.longitude,
            element.geo_point.latitude , element.geo_point.longitude); console.log(element.bloodType, bloodCheck)
            if(bloodCheck === true){
              return distance < 15000;
            }
            else{
              return false;
            }.map((user, idx) => <Marker
            key={idx}
            coordinate={{latitude: user.geo_point.latitude, longitude: user.geo_point.longitude}}
            >
</Marker>)}

</MapView>

Answer 1

您可以根据自己的情况创建函数来检查血型值

check = (bloodType1, bloodType2) => {
        var AType = ["A", "AB"];
        var BType = ["B", "AB"];
        var ABType = ["A", "B", "AB"];
        var OType = ["A", "B", "AB", "O"];
        if (bloodType1 == 'A' && AType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'B' && BType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'AB' && ABType.includes(bloodType2, 0)) {
            return true;
        } else if (bloodType1 == 'O' && OType.includes(bloodType2, 0)) {
            return true;
        } else {
            return false
        }
    }

然后简单地将您的值传递给函数

let bloodCheck = this.check(this.props.currentUser.bloodType, element.bloodType)  && element.geo_point.latitude 
            !== this.props.currentUser.geo_point.latitude && element.geo_point.longitude 
            !== this.props.currentUser.geo_point.longitude && element.locationOn === true ;

使用条件标记反应本机地图

React native maps with conditional markers

javascript

firebase

react-native

react-native-maps