Question

我尝试过使用蚂蚁设计徽章，通常将其放在图标上即可使用，但是没有带反应传单标记的运气。这是我尝试过的

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

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

Answer 1

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

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的标记上添加徽章？

1 个答案: