React JS中Pigeon地图Marker的onClick事件无法触发求助

Pigeon Maps的Marker组件本身不支持直接通过onClick属性绑定点击事件，你之前的写法不符合库的使用逻辑。正确的做法是在Marker的子元素上绑定点击事件，同时确保子元素有明确的可点击区域。

修改后的代码示例：

import "./Map.css";
import { Map, Marker } from "pigeon-maps";

function MapSection() {
  const defaultProps = {
    center: [34.05849001345665, -118.24410152128736],
    zoom: 13,
  };

  const handleMarkerClick = () => {
    console.log("onClick Function");
  };

  return (
    <div className="map-container" style={{ height: "100%", width: "100%" }}>
      <Map
        dprs={[1, 2]}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      >
        <Marker
          width={50}
          anchor={[34.0549172229829, -118.25578667187575]}
        >
          {/* 自定义带样式的可点击标记元素 */}
          <div 
            style={{
              width: '30px',
              height: '30px',
              borderRadius: '50%',
              backgroundColor: '#ff4444',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontWeight: 'bold'
            }}
            onClick={handleMarkerClick}
          >
            M
          </div>
        </Marker>
      </Map>
    </div>
  );
}

关键说明： #

• 纯文本子元素没有足够的可点击区域，且容易被地图图层遮挡，导致点击事件无法触发。
• 自定义div通过设置尺寸、背景色等样式，明确了可点击范围，cursor: pointer也能给用户直观的点击提示。
• 如果仍出现点击无响应，检查地图容器或其他元素的z-index属性，确保Marker的子元素没有被其他图层覆盖。

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