Vue热点区域 area imagemapster

首先要安装两个插件 一个是 jQuery 和 imagemapster

cnpm i imagemapster --save

cnpm i jquery --save

在用到的热点地图模块引入：

import $ from "jquery";
import "imagemapster";

定义热点区域，如果是不规则的区域，推荐使用 Dreamweaver 进行区域选择（可以去主页看Dreamweaver 热点区域选择方法）

<div id="mapHover">
<img
id="tabImg"
src="../assets/img/881.png"
usemap="#Map"
class="ewb-map-main"
/>
<map name="Map" id="Map">
<area
shape="poly"
name="1"
coords="62,243,56,241,61,260,68,280,68,289,66,297,63,305,61,310,54,314,51,320,48,326,46,337,44,345,43,349,50,350,57,352,61,355,61,363,62,368,68,369,74,367,79,368,85,371,92,369,100,365,106,361,110,357,119,353,126,349,133,348,137,349,144,350,148,351,151,352,152,352,156,347,155,341,152,333,148,325,144,325,138,323,136,320,131,319,129,314,123,310,121,297,125,295,136,296,141,296,143,298,150,293,156,290,161,289,163,280,165,275,169,273,169,269,166,263,159,261,155,260,148,262,138,264,133,263,127,262,121,257,104,252,87,260,68,246"
href="#"
/>
<area
shape="poly"
name="2"
coords="157,260,141,262,132,262,123,258,111,253,105,252,88,260,75,250,65,244,59,241,57,236,57,229,63,217,64,208,66,206,73,208,79,212,83,211,86,207,90,205,95,207,95,201,96,198,93,193,89,191,86,183,85,176,88,169,92,169,98,169,106,170,110,170,112,175,116,178,119,179,123,183,130,186,133,187,138,190,141,192,142,199,142,204,137,204,134,203,133,202,130,206,126,209,124,211,121,215,123,222,125,227,129,231,132,234,135,238,137,239,143,240,147,238,150,240,154,246,157,250,157,255"
href="#"
/>
</map>
</div>

在data里面定义所需属性：

options: {
fillColor: "fec200", //填充颜色设置
fillOpacity: 0.5,//不透明度，值为0-1。
stroke: true, //轮廓描边，当鼠标悬停或显示高亮时给所在区域描边。
strokeColor: "fec200",
//廓的描边颜色。
strokeWidth: 3, //轮廓描边的宽度。
strokeOpacity: 0.3, //轮廓描边的透明度
fade: false,
//当鼠标悬停显示高亮时使用颜色衰减效果。
singleSelect: true,
highlight: true,
mapKey: "name", //根据name保持高亮 name值相同的时候 鼠标经过某一处同时高亮
},

 在mounted 里面写方法

mounted() {
let _this = this;
// 使_this 变为 Vue 中的this
因为在jQuery中this指向不一样
var $mapimg = $(".ewb-map-main");
// 选择所需区域
$mapimg.mapster(this.options);
// 调用方法 这里的方法是 imagemapster里面的
$("#Map area").click(function () {
// 设置点击事件
console.log($(this).attr("name"))
// 点击输出name属性的值
});
},

完整代码：

<template>
<div id="app">
<img
src="***"
width="400"
height="275"
usemap="#Map"
class="ewb-map-main"
/>
<map name="Map" id="Map">
<area
shape="poly"
name="1"
coords="104,152,88,154,72,147,62,152,42,140,44,149,49,164,48,174,43,184,37,190,36,200,33,208,44,211,45,219,52,219,62,220,74,215,82,209,88,206,104,210,102,199,96,193,91,190,83,183,83,175,91,174,96,176,105,171,112,158,109,154"
href="#"
/>
<area
shape="poly"
name="2"
coords="75,96,63,94,59,103,61,108,66,113,66,117,61,118,56,122,47,118,45,124,42,132,42,139,60,150,64,151,72,147,87,154,104,152,104,145,98,139,92,140,85,132,81,124,88,115,91,117,96,115,95,112,93,108,86,106"
href="#"
/>
</map>
</div>
</template>
<script>
export default {
data() {
return {
options: {
fillColor: "fec200", //填充颜色设置
fillOpacity: 0.5, //不透明度，值为0-1。
stroke: true, //轮廓描边，当鼠标悬停或显示高亮时给所在区域描边。
strokeColor: "fec200", //廓的描边颜色。
strokeWidth: 3, //轮廓描边的宽度。
strokeOpacity: 0.3, //轮廓描边的透明度
fade: false, //当鼠标悬停显示高亮时使用颜色衰减效果。
singleSelect: true,
highlight: true,
mapKey: "name", //保持高亮
},
};
},
mounted() {
let _this = this;
this.$(".ewb-map-main").mapster(this.options);
this.$("#Map area").click(function () {
console.log(_this.$(this).attr("name"));
});
},
};
</script>

最后

以上就是温暖方盒为你收集整理的Vue热点区域 area imagemapster的全部内容，希望文章能够帮你解决Vue热点区域 area imagemapster所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。