开发指南073-图片热点

 平台支持使用图像导航界面，例如展示如下一张图，用户点击对应位置触发对应动作

编辑

实现原理：

<template>

 <div>

   <img :src="imageUrl" :usemap="imageMapId" @click="handleClick" />

   <map :name="imageMapId">

     <area v-for="(area, index) in areas" :key="index" :shape="area.shape" :coords="area.coords" :href="area.href">

   </map>

 </div>

</template>

核心点在usemap属性

热点数据通过后台接口获取（注意处理权限，没有权限的热点不生成）  

 areas: [

       { shape: 'rect', coords: '0,0,100,100', href: 'page1' },

       { shape: 'circle', coords: '150,150,50', href: 'page2' }

     ]

   handleClick(event) {

     const target = event.target;

     const area = document.elementFromPoint(event.clientX, event.clientY);

     if (area && area.tagName.toLowerCase() === 'area') {

        //处理跳转： area.getAttribute('href');

     }

   }