在标记上方反应本机地图文本

Question

我想知道是否可以在标记顶部显示文本，以便您无需单击它就知道标记是什么

<MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <MapView.Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        >
          <View>
            <Text
              style={{
                position: "absolute",
                color: "black",
                textAlign: "center",
              }}
            >
              text
            </Text>
          </View>
        </MapView.Marker>
      </MapView> 

目前正在执行此操作，但一旦我放置文本标签，标记就会消失，如果我删除它，标记会再次显示

Answer 1

您可以使用 MapView 中的 CallOut 组件，每当您点击地图/标记时它都会显示其内容，但这仅适用于 iOS，因此您必须检查 iOS 平台是否可以使用它以及 Android 是否可以创建自己的平台。您可以检查react-native-maps/callout

<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
    {Platform.OS === 'ios' ? (
      // iOS: Use Callout
      <Callout style={{ width: 200, height: 50, margin: 8, justifyContent: 'center' }}>
        <Text
          style={{ color: 'black', fontWeight: 'bold' }}
          numberOfLines={2}
        >
          {address}
        </Text>
      </Callout>
    ) : (
      // Android: Custom View
      <View
        style={{
          backgroundColor: 'white',
          padding: 5,
          borderRadius: 5,
          marginBottom: 10,
          elevation: 3, // Shadow for Android
          shadowColor: 'black',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.3,
          shadowRadius: 4,
        }}
      >
        <Text style={{ color: 'black', fontWeight: 'bold' }}>
          {address}
        </Text>
      </View>
    )}
  </Marker>
</MapView>