上一次写了后台划出热点区域,把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"; }); } }