Vue 使用map标签与area标签 给图片添加点击事件

• cooreds属性：定义相关区域的坐标, 和shape属性搭配使用

• shape属性：定义了相关区域的形

  • 默认值（default）:规定全部区域
  • rect: 规定相关区域为矩形, cooreds属性值为(x1,y1,x2,y2),其中x1,y1为左上角的坐标，x2,y2为右下角的坐标；
  • circle: 规定相关区域为圆形, cooreds属性值为(x,y,radius),其中x,y为圆形的中心坐标，radius为圆形的半径；
  • poly: 规定先关区域为多边形, cooreds属性值为(x1,y1,x2,y2,x3,y3......xn,yn),规定了多边形各个顶点的坐标，由于浏览器会自动闭合多边形，所以尾部坐标不必与第一个坐标相等。

• 对于如何测量出 cooreds属性值, 我使用的是PS

  • 首先用 PS打开图片, 选择窗口勾选信息选项

    
    
    image.png

• 将鼠标放在需要定位的点上, 以矩形为例, 则是 左上和右下两个点的坐标(注意在测量前PS的测量工具单位需调整为像素)

  
  
  image.png

• 根据屏幕大小的变化, 图片尺寸发生变化, cooreds 位置进行对应的变化 (Vue 中将该方法放到 mounted 生命周期函数中)

              // 图片加载完成触发
                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');
                },

Tip: 对cooreds 位置进行计算之前一定要保证图片加载完成