有没有办法在 react-leaflet 的标记上添加徽章？

Question

我试过使用 ant design 徽章，通常当你把它放在图标上时它会起作用，但用 react-leaflet 标记就不行了。这是我试过的

<Badge count={5}>
  <Marker icon = {sideTipperIcon} position={[51.505, -0.09]}>
    <Tooltip direction='top'>
      Leading: Overload <br />
      Lagging: Utilization
    </Tooltip>
  </Marker>
</Badge>

在这种情况下徽章不显示，那么有什么方法可以在这个传单标记上显示徽章吗？

Answer 1

我不确定是否可以通过您提供的link实现。您可以像这样构建自己的徽章标记组件：

const MarkerWithBadge = props => {
  const initMarker = ref => {
    if (ref) {
      const popup = L.popup().setContent(props.children);
      ref.leafletElement
        .addTo(ref.contextValue.map)
        .bindPopup(popup, {
          className: "badge",
          closeOnClick: false,
          autoClose: false
        })
        .openPopup()
        // prevent badge from dissapearing onClick
        .off("click");
    }
  };
  return <Marker ref={initMarker} {...props} />;
};

徽章css选择器：

.badge .leaflet-popup-content {
  position: absolute;
  top: -5px;
  left: -12px;
  z-index: 10;
  min-width: 20px;
  width: 5px !important;
  height: 20px;
  padding: 0;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  background: #f5222d;
  border-radius: 10px;
}

并像这样使用它：

<Map style={{ height: "100vh" }} center={position} zoom={this.state.zoom}>
     <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     />
     <MarkerWithBadge position={position} icon={customMarker}>
       5
     </MarkerWithBadge>
</Map>

Demo

有没有办法在 react-leaflet 的标记上添加徽章？

Is there a way to add a badge on marker in react-leaflet?

javascript

leaflet

reactjs

react-leaflet