<div class="img-content" @click.capture="handelClickParent">
<img class="img" @load='imgOnError()' src="https://f.yunzhengshou.com/upload/helpdoc/wx-program-resources/house-bg.png" alt="房源" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area id="1001" shape="rect" coords="766,2095,938,2499" href="javascript:void(0)" @click="handlerFloor('1幢')" />
<area id="1002" shape="rect" coords="351,1791,499,2151" href="javascript:void(0)" @click="handlerFloor('2幢')" />
<area id="1003" shape="rect" coords="1086,1735,1345,2291" href="javascript:void(0)" @click="handlerFloor('4幢')" />
<area id="1004" shape="rect" coords="203,1227,355,1647" href="javascript:void(0)" @click="handlerFloor('6幢')" />
<area id="1005" shape="rect" coords="299,1091,531,1419" href="javascript:void(0)" @click="handlerFloor('10幢')" />
<area id="1006" shape="rect" coords="622,1055,734,1363" href="javascript:void(0)" @click="handlerFloor('13幢')" />
<area id="1007" shape="rect" coords="846,1231,1026,1695" href="javascript:void(0)" @click="handlerFloor('9幢')" />
<area id="1008" shape="rect" coords="1305,1187,1545,1419" href="javascript:void(0)" @click="handlerFloor('11幢')" />
</map>
</div>
-
cooreds属性：定义相关区域的坐标, 和shape属性搭配使用
-
shape属性：定义了相关区域的形
- 默认值（default）:规定全部区域
- rect: 规定相关区域为矩形, cooreds属性值为(x1,y1,x2,y2),其中x1,y1为左上角的坐标，x2,y2为右下角的坐标；
- circle: 规定相关区域为圆形, cooreds属性值为(x,y,radius),其中x,y为圆形的中心坐标，radius为圆形的半径；
- poly: 规定先关区域为多边形, cooreds属性值为(x1,y1,x2,y2,x3,y3......xn,yn),规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。
-
对于如何测量出 cooreds属性值, 我使用的是PS
-
首先用 PS打开图片, 选择窗口勾选信息选项
image.png
-
-
将鼠标放在需要定位的点上, 以矩形为例, 则是 左上和右下两个点的坐标(注意在测量前PS的测量工具单位需调整为像素)
image.png -
根据屏幕大小的变化, 图片尺寸发生变化, cooreds 位置进行对应的变化 (Vue 中将该方法放到 mounted 生命周期函数中)
// 图片加载完成触发
imgOnError() {
$(window).resize(function () {
var $img = $('.img');
var width = $img.width();
var height = $img.height();
var naturalWidth = $img.get(0).naturalWidth;
var naturalHeight = $img.get(0).naturalHeight;
console.log(naturalWidth);
console.log(naturalHeight);
$("#Map area").each(function () {
var coords = $(this).attr("coords").split(",");
var points = $(this).attr('points');
if (!!points) {
coords = points.split(",");
} else {
$(this).attr('points', coords);
}
for (i = 0; i < coords.length; i += 2) {
var x = coords[i];
var y = coords[i + 1];
coords[i] = parseInt(parseInt(x) * width / naturalWidth);
coords[i + 1] = parseInt(parseInt(y) * height / naturalHeight);
}
$(this).attr("coords", coords.join(","));
})
}).trigger('resize');
},
