Saya telah mencoba menggunakan lencana desain semut, biasanya berfungsi ketika Anda meletakkannya di ikon tetapi tidak berhasil dengan penanda selebaran reaksi. Inilah yang saya coba

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

Dalam skenario ini lencana tidak muncul, jadi apakah ada cara untuk menunjukkan lencana pada penanda selebaran ini?

1
Faizan Ahmad 9 Agustus 2019, 09:46

1 menjawab

Jawaban Terbaik

Saya tidak yakin apakah itu dapat dicapai melalui tautan yang Anda berikan. Anda dapat membuat komponen penanda lencana Anda sendiri seperti ini:

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} />;
};

Pemilih css lencana:

.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;
}

Dan gunakan seperti ini:

<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

2
kboul 9 Agustus 2019, 10:23