<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屬性：定義相關(guān)區(qū)域的坐標(biāo), 和shape屬性搭配使用
-
shape屬性：定義了相關(guān)區(qū)域的形
- 默認(rèn)值（default）:規(guī)定全部區(qū)域
- rect: 規(guī)定相關(guān)區(qū)域?yàn)榫匦? cooreds屬性值為(x1,y1,x2,y2),其中x1,y1為左上角的坐標(biāo)赃额，x2,y2為右下角的坐標(biāo)绪钥；
- circle: 規(guī)定相關(guān)區(qū)域?yàn)閳A形, cooreds屬性值為(x,y,radius),其中x,y為圓形的中心坐標(biāo)，radius為圓形的半徑躲因；
- poly: 規(guī)定先關(guān)區(qū)域?yàn)槎噙呅? cooreds屬性值為(x1,y1,x2,y2,x3,y3......xn,yn),規(guī)定了多邊形各個頂點(diǎn)的坐標(biāo)衡未，由于瀏覽器會自動閉合多邊形乐尊，所以尾部坐標(biāo)不必與第一個坐標(biāo)相等悬秉。
-
對于如何測量出 cooreds屬性值, 我使用的是PS
-
首先用 PS打開圖片, 選擇窗口勾選信息選項(xiàng)
image.png
-
-
將鼠標(biāo)放在需要定位的點(diǎn)上, 以矩形為例, 則是 左上和右下兩個點(diǎn)的坐標(biāo)(注意在測量前PS的測量工具單位需調(diào)整為像素)
image.png -
根據(jù)屏幕大小的變化, 圖片尺寸發(fā)生變化, cooreds 位置進(jìn)行對應(yīng)的變化 (Vue 中將該方法放到 mounted 生命周期函數(shù)中)
// 圖片加載完成觸發(fā)
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');
},
