如何使用react-simple-map给美国地图添加单起点多终点坐标

API 探路者

2026-8-8

解决react-simple-map中起点到多终点的线路渲染问题

核心问题在于你当前用单个<Line>组件传入所有坐标点，它会把这些点连成一条连续的折线，而非从起点到每个终点的独立线路。react-simple-map的<Line>组件确实没有to/from属性，仅通过coordinates定义单条线的路径。

正确实现方式

单独提取起点坐标，将所有终点整理为数组：

const startPoint = [-114.09056, 46.91631];
const endPoints = [
  [-93.21692, 44.88055],
  [-90.25803, 29.99339],
  [-107.89383, 38.50887],
  [-70.61433, 41.39303]
];

遍历终点数组，为每个终点生成独立的<Line>组件，每个组件的coordinates传入[起点, 对应终点]的数组。

修改后的完整代码：

const MapChart = () => {
  const startPoint = [-114.09056, 46.91631];
  const endPoints = [
    [-93.21692, 44.88055],
    [-90.25803, 29.99339],
    [-107.89383, 38.50887],
    [-70.61433, 41.39303]
  ];

  return (
    <ComposableMap projection="geoAlbersUsa">
      <Graticule stroke="#DDD" strokeWidth={0.5} />
      <Sphere stroke="#DDD" strokeWidth={0.5} />
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography
              key={geo.rsmKey}
              geography={geo}
              fill="#DDD"
              stroke="#FFF"
            />
          ))
        }
      </Geographies>
      {/* 遍历终点生成多条独立线路 */}
      {endPoints.map((endPoint, index) => (
        <Line
          key={index}
          coordinates={[startPoint, endPoint]}
          stroke="#F53"
          strokeWidth={2}
        />
      ))}
    </ComposableMap>
  );
};