我有一張國家地圖，上面用一張圖片勾勒出了該地區的輪廓。我試圖創建的React應用程序需要能夠在懸停在特定區域時獲得每個區域的統計數據。

我如何使地圖上的區域獨立于整個圖像，以便我可以單獨獲得一些信息，并且還能夠根據一些風險(統計)對這些區域進行著色？

我嘗試在Photoshop中剪切每個區域的形狀，然后將它們放在我的web應用程序中的原始圖像上，但我似乎無法完成。

你知道我該如何實現我想做的事情嗎？

您可以使用以下HTML元素將地圖圖像分割成多個部分:

& lt地圖& gt:https://developer . Mozilla . org/en-US/docs/Web/HTML/Element/map & ltarea & gt:https://developer . Mozilla . org/en-US/docs/Web/HTML/Element/area 示例:

<map name="map">
  <area
    shape="poly"
    coords="100,10,40,40,60,140,160,140,180,60"
    id="region1"
    onMouseEnter={() => yourActions('region1')}
  />

  <area
    shape="poly"
    coords="200,140,250,180,320,150,310,110,240,100"
    id="region2"
    onMouseEnter={() => yourActions('region2')}
  />
</map>