JS 随窗口大小更新map

<img width="100%"  src="../../assets/bottom_content.png" usemap="#map"/>
<map id="map" name="map">
    <!--                1545时的坐标-->
    <area shape="rect" coords="825,525,1180,585" href="javascript:;" @click="evaluate()">
    <area shape="rect" coords="535,785,620,810" href="javascript:;" @click="goHome()">
    <area shape="rect" coords="990,785,1160,820" href="javascript:;" @click="goPlay()">
    <area shape="rect" coords="535,850,705,875" href="javascript:;" @click="goMarket()">
    <area shape="rect" coords="990,850,1155,875" href="javascript:;" @click="goWhitePaper()">

</map>

vue框架

data

 screenWidth: document.documentElement.clientWidth,
 originalCoords :['825,525,1180,585','535,785,620,810','990,785,1160,820','535,850,705,875','990,850,1155,875'],

methods：

adjustMap() {
    var map = document.getElementById("map");
    var element = map.childNodes;

    var itemNumber = element.length;
    for (var i = 0; i <= itemNumber - 1; i++) {
        var item = i;
        var oldCoords = this.originalCoords[i];
        var newcoords = this.adjustPosition(oldCoords);
        element[item].setAttribute("coords", newcoords);
    }
},
adjustPosition(position) {
    var imageWidth = 1545;	//图片的长宽
    var each = position.split(",");
    var percent = this.screenWidth / imageWidth;
    //!! 应该用最初始版本的 oldCoords 和 image 算比例然后 * screenWidth
    //获取每个坐标点
    for (var i = 0; i < each.length; i++) {
        each[i] = Math.round(parseInt(each[i]) * percent).toString();
    }
    //生成新的坐标点
    var newPosition = "";
    for (var i = 0; i < each.length; i++) {
        newPosition += each[i];
        if (i < each.length - 1) {
            newPosition += ",";
        }
    }
    return newPosition;
},

mounted：

var that = this;
window.onresize = function () {
    that.screenWidth = document.body.clientWidth;
}

watch：

'screenWidth': function () {
    this.adjustMap()
}