一、场景
引入了vue的单一html页面中，一张大图片，不做切图，实现点击图上某一部分，触发功能
二、语法
三、问题
1.图片大小略高于一般设备的尺寸
一般 h5 中都是宽度拉满，高度自适应，因此重点关注宽度（浏览器F12常见移动端宽度尺寸）：
- iPhone SE: 375
- iPhone XR: 414
- iPhone 12 Pro: 390
- Pixel 5: 393
- ...
而由于 coords 的值是取 img 所在容器尺寸即设备尺寸，因此需要做简单的比例计算：
let img = new Image()
img.src = './images/bg.png'
// let coords = `0,${window.innerWidth * img.height/img.width *80%* img.height/img.height},${window.innerWidth},${window.innerWidth*img.height/img.width}`
let coords = `0,${window.innerWidth * img.height / img.width * 80%},${window.innerWidth},${window.innerWidth * img.height / img.width}`需要的部分恰好从80%高度的位置开始到底
其他形状也可用矩形比例定位法处理
四、代码
<img src="./images/bg.png" alt="" usemap="#img_map">
<map name="img_map" id="img_map">
<area href="#btn_group" shape="rect" :coords="coords"/>
</map>let img = new Image()
img.src = './images/bg.png'
// let coords = `0,${window.innerWidth * img.height/img.width *80%* img.height/img.height},${window.innerWidth},${window.innerWidth*img.height/img.width}`
this.coords = `0,${window.innerWidth * img.height / img.width * 80%},${window.innerWidth},${window.innerWidth * img.height / img.width}`over
