React Leaflet：让FlameMarker忽略事件，保证主Marker可点击

我在React Leaflet里渲染了两个叠加的Marker：主MapMarker和FlameMarker，代码如下：

return <React.Fragment key={i + 100}>
  <MapMarker
    obj={object}
    key={i}
    position={positionMap[i]}
    icon={objIcon}
    objName={convDataArr[1]}
    objType={convDataArr[2]}
    objStatus={convDataArr[3]}
    objcoalition={convDataArr[4]}
    objUnderAttack={convDataArr[5]}
    objNumUnits={convDataArr[6]}
    pane={convDataArr[2]}
    zIndexOffset={100}
    //riseOnHover={true}
  ></MapMarker>
  <FlameMarker
    key={i + 1000}
    position={positionMap[i]}
    icon={iconArray[21]}
  >
  </FlameMarker>
</React.Fragment>

现在视觉显示正常，但主MapMarker点不动，点击只会触发地图事件。我试过给FlameMarker加空的点击事件：

eventHandlers = {{
  click: () => {}
},
}}

但这样FlameMarker还是能被点击（只是没执行逻辑），不符合我的需求。手动在Chrome开发者工具里加CSS能解决，但React Leaflet会把自定义样式清掉，请问怎么正确加样式解决这个问题？

方法1：用CSS让FlameMarker不接收点击事件 #

React Leaflet的Marker最终会渲染成DOM元素，你可以给FlameMarker设置pointer-events: none，让点击直接穿透到下方的主Marker，且不会被React Leaflet移除样式：

• 全局CSS方式：先通过开发者工具找到FlameMarker的类名（通常是leaflet-marker-icon加上自定义标识），然后编写CSS：

.flame-marker {
  pointer-events: none;
}

接着给FlameMarker组件添加className属性：

<FlameMarker
  key={i + 1000}
  position={positionMap[i]}
  icon={iconArray[21]}
  className="flame-marker"
/>

• CSS-in-JS方式（比如styled-components）：直接给组件绑定样式：

import styled from 'styled-components';

const StyledFlameMarker = styled(FlameMarker)`
  pointer-events: none;
`;

// 替换原组件使用
<StyledFlameMarker
  key={i + 1000}
  position={positionMap[i]}
  icon={iconArray[21]}
/>

方法2：调整层级让主Marker优先接收点击 #

你已经给主Marker设置了zIndexOffset={100}，可以给FlameMarker设置更低的层级，确保主Marker在点击优先级上更高：

<FlameMarker
  key={i + 1000}
  position={positionMap[i]}
  icon={iconArray[21]}
  zIndexOffset={50}
/>

不过这种方法不如pointer-events直接，要是FlameMarker的视觉范围完全覆盖主Marker，还是可能出现点击优先级问题。

方法3：自定义Icon时绑定样式 #

如果FlameMarker的图标是你自己创建的L.Icon对象，可以在创建时直接添加类名，再用全局CSS控制：

const flameIcon = L.icon({
  iconUrl: '你的火焰GIF路径',
  className: 'flame-marker-icon'
});

然后添加CSS：

.flame-marker-icon {
  pointer-events: none;
}

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