代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img id="myImg" src="./b398c4c6c7789286fa6cb5bcd3814c9a.jpg" alt="" width="100%" usemap="#Map" onload="init()" />
<map name="Map">
<area shape="poly" coords="290,404,221,561,360,580,372,494,371,406" href="#1">
<area shape="poly" coords="65,402,225,340,244,374,281,398,213,556,125,495" href="#2">
<area shape="poly" coords="181,249,173,287,181,332,19,395,4,292,23,183" href="#3">
<area shape="poly" coords="227,240,68,172,128,85,221,23,283,185,251,203" href="#4">
<area shape="poly" coords="293,179,230,18,302,5,372,4,372,178,336,171" href="#5">
</map>
</div>
<script type="text/javascript">
function init(){
return setTimeout(function () {
adjust({
name: 'Map',
img: {
originalWidth: 395,
originalHeight: 607
}
})
}, 100);
}
// init()
var timeout = null; // onresize触发次数过多，设置定时器
window.onresize = function () {
clearTimeout(timeout);
timeout = init() // 页面大小变化，重新加载页面以刷新MAP
}
//获取MAP中元素属性
function adjust({
name,
img = {
originalWidth: 100,
originalHeight: 100
}
}) {
var map = document.querySelector(`[name="${name}"]`);
var element = [...map.childNodes].filter(item => item.coords);
let originalArea
if (!map.getAttribute('original-area')) {
originalArea = element[0].coords
map.setAttribute('original-area', originalArea)
} else {
originalArea = map.getAttribute('original-area')
}
var coefficient = {
width: parseFloat(element[0].coords.split(',')[0]) / parseFloat(originalArea.split(',')[0]),
height: parseFloat(element[0].coords.split(',')[1]) / parseFloat(originalArea.split(',')[1]),
};
var myImg = document.querySelector(`[usemap="#${name}"]`)
var ratio = {
width: myImg.width / img.originalWidth,
height: myImg.height / img.originalHeight
}
for (var i = 0; i < element.length; i++) {
var oldCoords = element[i].coords;
var newCoords = adjustPosition(oldCoords, coefficient, ratio);
element[i].setAttribute("coords", newCoords);
}
}
//调整MAP中坐标
function adjustPosition(position, coefficient = { height: 1, width: 1 }, ratio = { height: 1, width: 1 }) {
var each = position.split(",");
//获取每个坐标点
for (var i = 0; i < each.length; i++) {
each[i] = Math.round(parseFloat(each[i]) / coefficient.width * ratio.width).toString();//x坐标
i++;
each[i] = Math.round(parseFloat(each[i]) / coefficient.height * ratio.height).toString();//y坐标
}
//生成新的坐标点
var newPosition = "";
for (var i = 0; i < each.length; i++) {
newPosition += each[i];
if (i < each.length - 1) {
newPosition += ",";
}
}
return newPosition;
}
</script>
</body>
</html>
