如何在React-Native-Maps的Marker上叠加徽章（实现类似SVG图标中央叠加文本的效果）？

没问题！你当前代码的问题在于Callout组件本来就是用来点击Marker后弹出提示框的，不是用来直接在Marker上叠加内容的。好在react-native-maps的Marker组件支持传入自定义的React元素作为子组件——这正是我们实现徽章直接叠加在Marker上的关键。

下面是修改后的解决方案，能让徽章直接显示在Marker图标上：

import React from "react";
import { View, Image, StyleSheet } from "react-native";
import { Badge } from "react-native-elements";
import { Marker } from "react-native-maps";

const CustomMarker = ({ coordinate, badgeValue }) => {
  return (
    <Marker coordinate={coordinate}>
      {/* 自定义Marker容器：包含图标和叠加的徽章 */}
      <View style={styles.markerContainer}>
        {/* 替换成你自己的Marker图标（可以是本地图片、SVG等） */}
        <Image
          source={require('./assets/marker-icon.png')}
          style={styles.markerIcon}
        />
        {/* 用绝对定位把徽章固定在图标右上角（可根据需求调整位置） */}
        <Badge
          value={badgeValue}
          status="error"
          containerStyle={styles.badgeContainer}
        />
      </View>
    </Marker>
  );
};

const styles = StyleSheet.create({
  markerContainer: {
    position: 'relative', // 让子元素的绝对定位基于这个容器
  },
  markerIcon: {
    width: 40,
    height: 40,
    resizeMode: 'contain',
  },
  badgeContainer: {
    position: 'absolute',
    top: -5, // 向上偏移一点，让徽章部分超出图标
    right: -5, // 向右偏移一点
    // 如果想把徽章放在图标中央，可以改成：
    // top: '50%',
    // right: '50%',
    // transform: [{ translateX: 5 }, { translateY: -5 }]
  },
});

export default CustomMarker;

关键说明： #

1. 去掉Callout组件：Callout是交互触发的弹窗，不符合直接叠加的需求，直接用Marker的children来定义自定义内容即可。
2. 绝对定位控制位置：通过position: 'absolute'让徽章相对于父容器（Marker图标容器）定位，你可以自由调整top、right等值来把徽章放在右上角、中央或者任何你需要的位置。
3. 自定义图标适配：如果用SVG图标替代图片，只需要把Image组件换成react-native-svg的对应组件即可，定位逻辑完全一致。

如果你想保留类似默认Marker的圆形样式，也可以直接用View绘制Marker背景，再叠加徽章：

import React from "react";
import { View, StyleSheet } from "react-native";
import { Badge } from "react-native-elements";
import { Marker } from "react-native-maps";

const CustomMarker = ({ coordinate, badgeValue }) => {
  return (
    <Marker coordinate={coordinate}>
      <View style={styles.markerContainer}>
        {/* 模拟默认Marker的圆形样式 */}
        <View style={styles.defaultMarker} />
        <Badge
          value={badgeValue}
          status="error"
          containerStyle={styles.badgeContainer}
        />
      </View>
    </Marker>
  );
};

const styles = StyleSheet.create({
  markerContainer: {
    position: 'relative',
  },
  defaultMarker: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#007AFF', // iOS默认Marker蓝色
    borderWidth: 2,
    borderColor: 'white',
  },
  badgeContainer: {
    position: 'absolute',
    top: -8,
    right: -8,
  },
});

export default CustomMarker;

这样就能完美实现你要的「徽章直接显示在Marker上」的效果啦！

内容的提问来源于stack exchange，提问作者Shreya B