图像热点区域前端显示问题

上一次写了后台划出热点区域，把img标签和map标签存储在本地的原理，这一次来写前端怎么从本地拿出数据一直显示在前端页面。（我是用的是移动端vant+vue）

就如下图所示：

1.首先呢 把html显示在页面上， 我就先直接放在页面上，之后是要从后台获取渲染到页面上的。

<template>
  <div>
    <!-- <van-button type="primary">主要按钮</van-button> -->
    <!-- 地图 -->

    <img  src="http://www.baidu.com/img/baidu_logo.gif"  width="270"  height="129"  border="0"  usemap="#bdMap"  id="bd"/>
    <map name="bdMap" id="bdMap">
      <area  id="mmm"  shape="rect"  coords="35, 22, 115, 97"  style=" position:absolute;border:2px solid #FF0000;"  />
      <area  id="mmm"  shape="rect"  coords="158, 26, 238, 94"  style=" position:absolute;border:2px solid #FF0000;"  />
    </map>
  </div>
</template>

2.初始化 this.init(sm) , demo()是为了获取到img图片在页面中的位置，因为图片上热点区域数量不是固定的，所以要让每个区域都显示出来，把所有area都传给init()函数，在init()函数中把形参循环遍历，显示热点区域边框。

 mounted() {
    var areal = document.getElementsByTagName("area");
    var sm = Array.prototype.slice.call(areal); //转化为数组
    this.init(sm);
  },
  methods: {
    list() {
      demoList().then(res => {
        console.log(res);
      });
    },
    demo(obj) {
      var x = obj.offsetLeft;
      var y = obj.offsetTop;
      while (obj.offsetParent) {
        obj = obj.offsetParent;
        x += obj.offsetLeft;
        y += obj.offsetTop;
      }
      return { x: x, y: y };
    },
    init(obj) {
      var img = document.getElementById("bd");
      var offset = this.demo(img);
      obj.forEach((e, i) => {
        var coords = e.coords.split(",");
        e.style.left = offset.x + parseInt(coords[0]) + "px";
        e.style.top = offset.y + parseInt(coords[1]) + "px";
        e.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
        e.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
      });
    }
  }