我有一张国家Map，上面画出了一个地区的轮廓。我正在尝试创建的React应用程序需要能够在悬停在特定区域时获得每个区域的统计数据。我如何使Map上的区域独立于整个图像，以便单独获得一些信息，并能够根据一些风险（统计数据）对这些区域进行着色？我试着在Photoshop中剪切每个区域的形状，然后将它们放在我的网络应用程序中的原始图像上，但我似乎无法完成。你知道我该怎么做吗？
ni65a41a1#
您可以使用以下HTML元素将Map图像拆分为多个部分：
<map>
<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>
1条答案
按热度按时间ni65a41a1#
您可以使用以下HTML元素将Map图像拆分为多个部分：
<map>：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map<area>：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area示例：