数据结构：
{
"leftX": 6,
"topY": 95,
"rightX": 369,
"bottomY": 353,
"link": {
"linkName": "Xxxx",
"linkUrl":"www.baidu.com",
}
}
解决方案：
使用a标签绝对定位，为了兼容各种情况，采用百分比布局。
代码：
<img src={data.backgroundImgUrl} />
data.map((item, index) => (
<a className='hotareaLink' key={index} style={{"left":this.transformPx(item.leftX)+'%',"transform": "translateY("+(item.topY/(item.bottomY- item.topY))*100+"%)","width":this.transformPx(item.rightX- item.leftX)+'%',"paddingTop":((item.bottomY- item.topY)/750)*100+"%","zIndex":index }} to={item.link.linkUrl}></a> ))
}
transformPx = (d)=>{
return (d/750)*100
}
背景：
绘制热区时以图片宽度为750 来计算leftX 、rightX，高度自适应
{/* 为了兼容PC端浏览器打开热区、PC微信浏览器打开、移动端打开、移动端屏幕旋转使用百分比，宽度以750为基础计算百分比，由于拿不到图片真实高度，距离顶部使用transform(以自身为基础计算百分比)，height使用paddingTop(以宽度为基础计算比例） */}
padding-top:代替height，padding-top百分比是以宽度为基础计算
