React简易地图中Marker样式无法生效问题求助

你的代码里有几个关键问题导致Marker样式无法生效：

• react-simple-maps的Marker组件不支持你写的style结构：Marker只是定位容器，它不识别default/hover/pressed这种状态化样式属性，你写的这个配置不会被组件处理。
• 变量引用错误：airports.map遍历的是item，但你用了marker.LONGITUDE，应该改成item.LONGITUDE；函数组件里不需要bind(this)，直接传递事件处理函数即可。
• 内部circle的硬编码样式覆盖：你给<circle>直接写了fill="#F53"，这会覆盖任何继承样式。

下面给出两种可行的解决方法：

方法一：用CSS类实现基础交互效果 #

适合简单的鼠标悬停、点击交互，无需JS状态管理：

1. 先添加CSS样式：

.map-marker circle {
  cursor: pointer;
  fill: #06F;
}
.map-marker:hover circle {
  fill: #000;
}
.map-marker:active circle {
  fill: #02A;
}

2. 修正后的组件代码：

const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const MapChart = () => {
  const handleClick = (airport) => {
    // 你的点击逻辑
  };

  return (
    <ComposableMap projection="geoAlbersUsa">
      <Geographies geography={geoUrl}>
        {({ geographies }) => (
          <>
            {geographies.map(geo => (
              <Geography
                key={geo.rsmKey}
                stroke="#FFF"
                geography={geo}
                fill="#DDD"
              />
            ))}
          </>
        )}
      </Geographies>
      {airports.map((item, index) => (
        <Marker 
          key={index} 
          coordinates={[item.LONGITUDE, item.LATITUDE]} 
          onClick={() => handleClick(item)}
          className="map-marker"
        >
          <circle r={5} />
        </Marker>
      ))}
    </ComposableMap>
  );
};

方法二：用React状态管理复杂交互状态 #

如果需要更灵活的状态控制（比如点击后保持选中状态），可以用useState维护每个Marker的状态：

import { useState } from 'react';
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";

const MapChart = () => {
  const handleClick = (airport) => {
    // 你的点击逻辑
  };

  const [hoveredIndex, setHoveredIndex] = useState(null);
  const [pressedIndex, setPressedIndex] = useState(null);

  return (
    <ComposableMap projection="geoAlbersUsa">
      <Geographies geography={geoUrl}>
        {({ geographies }) => (
          <>
            {geographies.map(geo => (
              <Geography
                key={geo.rsmKey}
                stroke="#FFF"
                geography={geo}
                fill="#DDD"
              />
            ))}
          </>
        )}
      </Geographies>
      {airports.map((item, index) => {
        let fillColor = "#06F";
        if (pressedIndex === index) fillColor = "#02A";
        else if (hoveredIndex === index) fillColor = "#000";

        return (
          <Marker 
            key={index} 
            coordinates={[item.LONGITUDE, item.LATITUDE]} 
            onClick={() => {
              handleClick(item);
              setPressedIndex(index);
            }}
            onMouseEnter={() => setHoveredIndex(index)}
            onMouseLeave={() => setHoveredIndex(null)}
            style={{ cursor: "pointer" }}
          >
            <circle r={5} fill={fillColor} />
          </Marker>
        );
      })}
    </ComposableMap>
  );
};

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