在 Android 上反应本机地图标记

Question

我在 Android 中的标记上创建自定义视图时遇到问题。

它是一个带有自定义图标的标记和一个文本位于标记顶部的视图，绝对。这是它在 iOs 上的样子（以及它应该的样子）。

但在 Android 上，情况完全不同。我知道这是因为 Android 对标记的处理方式不同，但仍然想获得相同的结果，但想不出办法。

看起来 Android：

在标记的自定义图像宽度处被截断。

一个选项是为包含图像的视图和带有文本的视图提供宽度，但如果这样做，它只会向右移动（给负向左没有帮助）并且标记停止正在锚定。

问题：如何在 Android 上复制 iOs 行为？

marker的代码如下：

return (
    <MapViewMarker
      coordinate={{
        latitude: props.vehicle.lat,
        longitude: props.vehicle.lng,
      }}
      anchor={{ x: 0.5, y: 0.5 }}
      onPress={props.onMarkerPress}
      stopPropagation
      style={styles.markerStyling}
      tracksViewChanges={tracksViewChangesState}
    >
      <View style={styles.imageViewStyling}>
        <Image
          source={props.image}
          style={styles.flatMarker}
          onLoad={stopTrackingViewChanges}
        />
        {props.showBattery && (
          <View style={[styles.batteryContainer, urgent
            ? styles.batteryContainerUrgent
            : styles.batteryContainerNonUrgent,
          { borderColor: urgent ? COLOR_RED_MARKER_BORDER : props.borderColor }]}
          >
            <Text
              style={[
                styles.batteryText, urgent
                  ? styles.batteryTextUrgent
                  : styles.batteryTextNonUrgent]}
              ellipsizeMode="tail"
              numberOfLines={1}
            >
              {renderMarkerText()}
            </Text>
          </View>
        )}
      </View>
    </MapViewMarker>
  ); 

const styles = StyleSheet.create({
  flatMarker: {
    height: 25,
    width: 25,
  },
  batteryContainer: {
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    paddingVertical: Platform.OS === "ios" ? 1 : 0,
    borderRadius: 2,
    borderWidth: 1,
  },
  batteryContainerNonUrgent: {
    width: '100%',
    backgroundColor: COLOR_WHITE,
  },
  batteryContainerUrgent: {
    width: '300%',
    left: -25,
    backgroundColor: COLOR_RED_MARKER,
    zIndex: 30,
  },
  batteryText: {
    fontFamily: FONT_AVENIR_BLACK,
  },
  batteryTextUrgent: {
    color: COLOR_WHITE,
    fontSize: 9,
  },
  batteryTextNonUrgent: {
    color: COLOR_BLACK,
    fontSize: 8,
  },
  markerStyling: {
    zIndex: 20,
  },
  imageViewStyling: {
    paddingVertical: 8,
  },
});

非常感谢任何帮助！

Answer 1

对于寻找灵感的任何人，我终于解决了它，为封装视图提供 display: flex 和固定宽度，然后在样式方面将标记和框视为其子项，例如所以：

imageViewStyling: {
    paddingVertical: 8,
    width: 100,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

在 Android 上反应本机地图标记

React native maps marker on Android

react-native

react-native-maps