[微信小程序]在图片上的特定区域点击实现功能

目录

一、功能描述

二、两种不同的解决方法

1.方法一：image组件和view组件相结合

2.方法二：获取点击事件的位置信息

---

一、功能描述

  对于前端初学者,在前端设计尤其是地图功能设计过程中，偶尔会碰到下面这个问题：实现在图片上特定区域内的点击进行跳转或其它功能。对于这个问题，本文提供两种不同的解决方法。

二、两种不同的解决方法

1.方法一：image组件和view组件相结合

结果展示

实现逻辑

在这个方法里，我们设置图片占满全屏，并设置其位置为相对位置。即position: relative;

之后，我们设置不同的view视图容器位置为绝地位置。即position: absolute;

然后设置image和view的z-index值，使得所有的view的z-index均大于image的

之后通过设置不同的view的top、left值来确定其位置，并设置width和height来设置其覆盖范围

代码片段

wxml
<view class="main">
  <image src="你的图片地址" mode="" class="pic"/>
  <view class="cloud" bindtap="CLOUD"></view>
  <view class="hk" bindtap="HK"></view>
  <view class="sj" bindtap="SJ"></view>
  <view class="tzl" bindtap="TZL"></view>
  <view class="sch" bindtap="SCH"></view>
  <view class="snsw" bindtap="SNSW"></view>
  <view class="mgxz" bindtap="MGXZ"></view>
  <view class="twt" bindtap="TWT"></view>
  <view class="tryc" bindtap="TRYC"></view>
  <view class="xkdt" bindtap="XKDT"></view>
</view>
<hsd_footer></hsd_footer>

wxss
.main {
  position: relative;
  height: 1061rpx;
  width: 750rpx;
}

.main .pic {
  position: relative;
  height: 1061rpx;
  width: 750rpx;
  z-index: 0;
}

.main .cloud {
  position: absolute;
  z-index: 2;
  top: 440rpx;
  left: 130rpx;
  width: 115rpx;
  height: 120rpx;
  background-color: transparent;
}

.main .hk {
  position: absolute;
  z-index: 2;
  top: 585rpx;
  left: 340rpx;
  width: 115rpx;
  height: 120rpx;
  background-color: transparent;
}

.main .sj {
  position: absolute;
  z-index: 2;
  top: 585rpx;
  left: 0rpx;
  width: 175rpx;
  height: 160rpx;
  background-color: transparent;
}

.main .tzl {
  position: absolute;
  z-index: 2;
  top: 170rpx;
  left: 155rpx;
  width: 130rpx;
  height: 100rpx;
  background-color: transparent;
}

.main .sch {
  position: absolute;
  z-index: 2;
  top: 285rpx;
  left: 240rpx;
  width: 160rpx;
  height: 130rpx;
  background-color: transparent;
}

.main .snsw {
  position: absolute;
  z-index: 2;
  top: 550rpx;
  left: 450rpx;
  width: 135rpx;
  height: 100rpx;
  background-color: transparent;
}

.main .mgxz {
  position: absolute;
  z-index: 2;
  top: 300rpx;
  left: 450rpx;
  width: 250rpx;
  height: 135rpx;
  background-color: transparent;
}

.main .twt {
  position: absolute;
  z-index: 2;
  top: 665rpx;
  left: 530rpx;
  width: 85rpx;
  height: 135rpx;
  background-color: transparent;
}

.main .tryc {
  position: absolute;
  z-index: 2;
  top: 690rpx;
  left: 220rpx;
  width: 85rpx;
  height: 135rpx;
  background-color: transparent;
}

.main .xkdt {
  position: absolute;
  z-index: 2;
  top: 810rpx;
  left: 350rpx;
  width: 120rpx;
  height: 135rpx;
  background-color: transparent;
}

json
Page({
	/**
		 * 页面的初始数据
		 */
	data: {
	//设置标记点
	markers: [
	{
	id: 4,
	latitude: 31.938841,
	longitude: 118.799698,
	width: 30,
	height: 30
	}
	],
	latitude:'',
	longitude: '',
	},
	CLOUD() {
	wx.openLocation({
	latitude: 33.53761602081285,    //目标位置的纬度
	longitude: 106.89011593077467,  //目标位置的经度
	})
  },
  HK(){
    wx.openLocation({
      latitude:33.538952949314385,    //目标位置的纬度
      longitude: 106.90333922121809,  //目标位置的经度
      })
  },
  SJ(){
    wx.openLocation({
      latitude:33.53889035111852,    //目标位置的纬度
      longitude: 106.91427726958082,  //目标位置的经度
      })
  },
  TZL(){
    wx.openLocation({
      latitude: 33.59597002051454,
      longitude: 106.81963489641187,
    })
  },
  SNSW(){
    wx.openLocation({
      latitude: 33.53844588084152,
      longitude: 106.91443824626755,
    })
  },
  SCH(){
    wx.openLocation({
      latitude: 33.59288386524651,
      longitude: 106.80703582594046,
    })
  },
  MGXZ(){
    wx.openLocation({
      latitude:33.55299598713276 ,
      longitude: 106.91361805585858,
    })
  },
  TWT(){
    wx.openLocation({
      latitude: 33.52215281772647,
      longitude: 106.9233920221596,
    })
  },
  TRYC(){
    wx.openLocation({
      latitude: 33.5380812096245,
      longitude: 106.91394528200915,
    })
  },
  XKDT(){
    wx.openLocation({
      latitude: 33.5334644147482,
      longitude: 106.84775336441803,
    })
  },
	onLoad() {
	}
	})

补充

通过以上代码，我们实现了，点击地图上不同地方，可以直接跳转到该地方的导航上

2.方法二：获取点击事件的位置信息

实现逻辑

使用 <image> 组件来展示图片，并结合 <view> 组件和触摸事件绑定来实现点击功能。

在下面的 handleTap 函数中，我们使用 event.detail.x 和 event.detail.y 获取点击事件的横坐标和纵坐标信息。然后，你可以根据这些坐标信息来判断点击是否在特定的区域范围内，并执行相应的功能逻辑。

wxml界面

<view>
  <image src="/path/to/image.jpg" mode="aspectFit" bindtap="handleTap"></image>
</view>

json界面

Page({
  handleTap: function(event) {
    // 获取点击事件的坐标信息
    var x = event.detail.x;
    var y = event.detail.y;
    
    // 根据坐标信息进行相应的处理逻辑
    // 比如判断点击的区域是否在特定的位置范围内，然后执行相应的功能
    if (x > 100 && x < 200 && y > 200 && y < 300) {
      // 在特定区域内执行的逻辑
      console.log("点击了特定区域");
      // 执行你的功能代码
    }
  }
})