React Native Maps条件标记开发问题：如何根据当前用户血型显示兼容血型的用户地图标记

嘿，我明白你遇到的问题了——当前用户是A型血时，地图上只显示了同血型的用户，没能展示AB型的用户。问题出在你过滤用户的条件上，原来的逻辑只严格匹配了相同血型，没考虑血型兼容的情况。

咱们先理清楚需求对应的血型规则：

• A型用户需要显示A型和AB型的用户
• B型用户需要显示B型和AB型的用户
• O型用户可以显示所有血型（O、A、B、AB）
• AB型用户只显示AB型用户

接下来修改你的过滤逻辑就行，我给你调整后的完整代码：

<MapView>
  {this.state.users
    .filter(element => {
      // 定义血型兼容映射表，后续修改规则直接改这里就行
      const compatibleBloodTypes = {
        'A': ['A', 'AB'],
        'B': ['B', 'AB'],
        'O': ['O', 'A', 'B', 'AB'],
        'AB': ['AB']
      };
      // 获取当前用户对应的可显示血型列表
      const allowedTypes = compatibleBloodTypes[this.props.currentUser.bloodType] || [];
      
      // 检查血型兼容、排除当前用户自己、确认用户开启位置权限
      const bloodCheck = allowedTypes.includes(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;
      
      // 计算当前用户和目标用户的距离
      const distance = this.calculateDistance(
        this.props.currentUser.geo_point.latitude,
        this.props.currentUser.geo_point.longitude,
        element.geo_point.latitude,
        element.geo_point.longitude
      );
      
      // 同时满足血型兼容和距离要求才返回
      return bloodCheck && distance < 15000;
    })
    .map((user, idx) => (
      <Marker
        key={idx}
        coordinate={{
          latitude: user.geo_point.latitude,
          longitude: user.geo_point.longitude
        }}
      >
        {/* 这里可以添加Marker的自定义内容，比如显示用户血型的标签 */}
      </Marker>
    ))}
</MapView>

关键修改说明： #

1. 血型兼容映射表：用对象compatibleBloodTypes明确每种血型对应的可显示用户血型，后续调整规则只需要修改这个对象，维护起来更方便。
2. 替换严格相等判断：把原来的this.props.currentUser.bloodType === element.bloodType改成allowedTypes.includes(element.bloodType)，这样就能匹配所有兼容的血型了。
3. 优化自我排除逻辑：原来分开判断经纬度的方式可能存在误差，改成同时判断纬度和经度是否都相同，逻辑更严谨。
4. 简化返回逻辑：直接返回bloodCheck && distance < 15000，去掉冗余的if-else，代码更简洁易读。

这样调整后，当当前用户是A型血时，地图上就会同时显示A型和AB型的用户标记啦！

内容的提问来源于stack exchange，提问作者Billy Ronaldo Chandra