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>