自定義一個按鈕并把它放在地圖容器的右上方有一個問題。 這是我的地圖框代碼。

<MapContainer style={{width:"32vw", height:"32vh",
    alignItems:"center", alignContent:"center",
    justifyContent:"center", justifyItems:"center", display:"flex"}} center={[0, 0]}
             zoom={13} scrollWheelZoom={true} zoomControl={false}>
   <TileLayer
       attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   />
   {renderMapBox(announcement.anc_status, announcement.volunteers)}
</MapContainer>

如何將這個切換按鈕添加到地圖框的右上方？ (如地圖中可用的zoomControl)

{announcement.anc_status === "P" && announcement.volunteers.length > 1 && <AllVolunteerSwitch onChange={viewAllHost}/>}

將類名添加到交換機組件中:

<AllVolunteerSwitch onChange={viewAllHost} className="switch" />

將以下css添加到您的css文件中:

.switch {
  position: absolute;
  z-index: 999;
  right: 10px;
  top: 10px;
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 15px;
  letter-spacing: 2px;
  width: 16%;
}