react-simple-maps 中的可选状态

Question

我正在使用 react-simple-maps 库创建地图

这是我目前的代码

<ComposableMap
  style={{ backgroundColor: "white", }}
  projection="geoAlbers"
  fill={'rgb(185,185,185)'}
  projectionConfig={{
    center:[-5, 25]
  }}>
      <Geographies style={{backgroundColor:'green', bottom:100}} geography={geoUrl}>
        {({ geographies }) =>
          geographies.map(geo => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
      <Marker coordinates={[-100.460846,25.649345]}>
      <g
        fill="none"
        stroke="#003DA5"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        transform="translate(-12, -24)"
      >
        <circle cx="12" cy="10" r="3" />
        <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
      </g>
  </Marker>
  </ComposableMap>

但是当你选择一个州时，有什么办法可以摆脱这个边界？

Answer 1

您可以这样做，将样式属性传递给<Geography />。

<ComposableMap>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map(geo => <Geography style={{
            default: { outline: "none" },
            hover: { outline: "none" },
            pressed: { outline: "none" },
          }} key={geo.rsmKey} geography={geo} />)
        }
      </Geographies>
    </ComposableMap>