使用 React 在图像上放置交互式标记-PHP中文网问答

请帮忙。我有一个像下图这样的图像显示在主页上（一个更大的图像）。请注意，“FORGE”房屋的中间有一个白色和蓝色标记，并带有黑色箭头。

“出租”房屋也是如此。

这些标记中的每一个都将充当交互式按钮。以下是预期的交互行为：

将鼠标悬停时，蓝色背景将展开以显示“Forge”或“Rentals”等文本
点击后，它将引导用户前往相应的“Forge”或“Rentals”页面。

还希望它能够响应，如果当屏幕调整大小时，按钮应保留在这些特定位置。

我正在尝试使用绝对定位、x、y 坐标来尝试使其工作。但由于我喜欢此类用户界面的经验，无法找到可行的解决方案。不确定我是否应该使用画布或其他方法。

任何帮助将不胜感激。

我的代码看起来像这样，但看起来我没有走在正确的轨道上：

const ImageComponent = () => {

  const markers = [
    { name: 'Forge', x: 100, y: 200 },
    { name: 'Rentals', x: 300, y: 150 },
    // Add more 
  ];

  const handleMarkerClick = (m) => {
    // do something with marker
  };

  return (
    
      

      {markers.map((marker, index) => (
         handleMarkerClick(marker)}
        />
      ))}
    
  );
};