图片热区 map-area + vue H5与APP交互

ZAXXIN

已于 2022-04-22 17:40:51 修改

阅读量2.5k

点赞数 5

文章标签： vue.js javascript

于 2022-01-06 16:42:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50572740/article/details/122346917

版权

本文介绍了如何在H5页面中内嵌图片热区并利用Vue.js与APP进行交互。通过app拦截URL Schemes实现h5-app通信。在实现过程中遇到两个问题：一是为图片热区添加可见边框，解决方案是通过添加绝对定位的边框盒子，并设置pointer-events: none;防止重合导致的点击事件失效；二是解决area标签href跳转问题，使用JavaScript的window.location.href改变地址栏网址，避免出现#号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求为h5页面内嵌进app
当点击图片热区时向app传递参数由app进行拦截处理
h5-app交互采用 app拦截URL Schemes的方式
在这里插入图片描述
以下为代码

<template>
  <div class="home">
    <div class="re-div">
      <img :src="imgUrl" usemap="#planetmap" class="ab-img">
      <map name="planetmap" id="planetmap">
        <area v-for="item,index in divArr" :key="index" shape="rect" :coords="item.coords" href="#" @click="jump(item)" />
      </map>

      <div v-for="item,index in divArr" :key="index" :style="{ top:item.top,left: item.left,width:item.width,height:item.height}" class="boeder-div">{
   {
   item.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      imgUrl: "",
      screenWidth: document.body.clientWidth, //监听窗口大小变化
      areaList: [],
      divArr: [],

最低0.47元/天解锁文章