目录
一、功能描述
二、两种不同的解决方法
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
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.方法二：获取点击事件的位置信息
实现逻辑
使用
在下面的 handleTap 函数中，我们使用 event.detail.x 和 event.detail.y 获取点击事件的横坐标和纵坐标信息。然后，你可以根据这些坐标信息来判断点击是否在特定的区域范围内，并执行相应的功能逻辑。
wxml界面
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("点击了特定区域");
// 执行你的功能代码
}
}
})
文章链接
您阅读本篇文章共花了：
发表评论