Typescript自定义函数无法在Leaflet地图创建CircleMarker问题

问题背景 #

原本直接调用<CircleMarker>组件能在地图上正常生成标记，但改用自定义函数createCircleMarkerOnMap后，地图上完全看不到标记了。

旧代码（可正常显示） #

import { LatLngExpression } from "leaflet";

{
  CityMapData.map((city, index) => {
    const { instancesCount, timeZoneData } = city;

    return (
      <CircleMarker
        key={index}
        center={timeZoneData.coordinates}
        radius={10 * Math.log(instancesCount + 1)}
        fillOpacity={0.5}
        stroke={false}
        color={COLORS.RED}
      />
    );
  })
}

新代码（无法显示） #

import { LatLngExpression } from "leaflet";

const createCircleMarkerOnMap = (
  index: number,
  instancescount: number,
  circleColor: string,
  timezoneData_timeZoneId: string,
  timezoneData_coordinates: LatLngExpression
) => {
  return <CircleMarker
    key={index}
    center={timezoneData_coordinates}
    radius={10 * Math.log(instancescount + 1)}
    fillOpacity={0.5}
    stroke={false}
    color={circleColor}
  />;
};

{
  CityMapData.map((city, index) => {
    const { healthyinstancesCount, unhealthyinstancesCount, timeZoneData } = city;

    createCircleMarkerOnMap(
      index,
      unhealthyinstancesCount,
      "COLORS.RED",
      timeZoneData.timeZoneId,
      timeZoneData.coordinates
    );
    if(showBothHealthyAndUnhealthy) {
      createCircleMarkerOnMap(
        index,
        healthyinstancesCount,
        "COLORS.GREEN",
        timeZoneData.timeZoneId,
        timeZoneData.coordinates
      );
    }
  })
}

问题原因 #

1. map回调未返回组件：旧代码在map循环里直接返回了<CircleMarker>组件，但新代码里只是调用了函数，却没有把函数返回的组件返回出去，React不会渲染这些未返回的元素。
2. 颜色参数传值错误：你把"COLORS.RED"作为字符串传递，而不是直接传COLORS.RED常量，导致<CircleMarker>拿到的颜色值是无效的字符串，标记可能因为颜色和背景一致而看不到。
3. Key值重复：同一个index创建两个标记时，key会重复，React无法正确识别每个组件，可能引发渲染异常。

修复后的代码 #

import { LatLngExpression } from "leaflet";

const createCircleMarkerOnMap = (
  key: string,
  instancescount: number,
  circleColor: string,
  timezoneData_coordinates: LatLngExpression
) => {
  return <CircleMarker
    key={key}
    center={timezoneData_coordinates}
    radius={10 * Math.log(instancescount + 1)}
    fillOpacity={0.5}
    stroke={false}
    color={circleColor}
  />;
};

{
  CityMapData.map((city, index) => {
    const { healthyinstancesCount, unhealthyinstancesCount, timeZoneData } = city;
    const markers = [];
    
    // 添加不健康实例的标记
    markers.push(createCircleMarkerOnMap(
      `${index}-unhealthy`,
      unhealthyinstancesCount,
      COLORS.RED,
      timeZoneData.coordinates
    ));
    
    // 按需添加健康实例的标记
    if(showBothHealthyAndUnhealthy) {
      markers.push(createCircleMarkerOnMap(
        `${index}-healthy`,
        healthyinstancesCount,
        COLORS.GREEN,
        timeZoneData.coordinates
      ));
    }
    
    // 返回标记数组
    return markers;
  })
}

修复说明 #

• 把map回调里的组件收集到数组中，最后返回这个数组，让React能正确渲染所有标记。
• 给每个标记生成唯一的key（比如${index}-unhealthy），避免key重复问题。
• 去掉颜色参数的引号，直接传递COLORS.RED/COLORS.GREEN常量，确保颜色值有效。
• 自定义函数里去掉了没用的timezoneData_timeZoneId参数，减少冗余。

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