目錄

一、功能描述

二、兩種不同的解決方法

1.方法一：image組件和view組件相結(jié)合

2.方法二：獲取點(diǎn)擊事件的位置信息

一、功能描述

? 對于前端初學(xué)者,在前端設(shè)計(jì)尤其是地圖功能設(shè)計(jì)過程中，偶爾會碰到下面這個問題：實(shí)現(xiàn)在圖片上特定區(qū)域內(nèi)的點(diǎn)擊進(jìn)行跳轉(zhuǎn)或其它功能。對于這個問題，本文提供兩種不同的解決方法。

二、兩種不同的解決方法

1.方法一：image組件和view組件相結(jié)合

結(jié)果展示

實(shí)現(xiàn)邏輯

在這個方法里，我們設(shè)置圖片占滿全屏，并設(shè)置其位置為相對位置。即position:?relative;

之后，我們設(shè)置不同的view視圖容器位置為絕地位置。即position:?absolute;

然后設(shè)置image和view的z-index值，使得所有的view的z-index均大于image的

之后通過設(shè)置不同的view的top、left值來確定其位置，并設(shè)置width和height來設(shè)置其覆蓋范圍

代碼片段

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({
	/**
		 * 頁面的初始數(shù)據(jù)
		 */
	data: {
	//設(shè)置標(biāo)記點(diǎn)
	markers: [
	{
	id: 4,
	latitude: 31.938841,
	longitude: 118.799698,
	width: 30,
	height: 30
	}
	],
	latitude:'',
	longitude: '',
	},
	CLOUD() {
	wx.openLocation({
	latitude: 33.53761602081285,    //目標(biāo)位置的緯度
	longitude: 106.89011593077467,  //目標(biāo)位置的經(jīng)度
	})
  },
  HK(){
    wx.openLocation({
      latitude:33.538952949314385,    //目標(biāo)位置的緯度
      longitude: 106.90333922121809,  //目標(biāo)位置的經(jīng)度
      })
  },
  SJ(){
    wx.openLocation({
      latitude:33.53889035111852,    //目標(biāo)位置的緯度
      longitude: 106.91427726958082,  //目標(biāo)位置的經(jīng)度
      })
  },
  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() {
	}
	})

補(bǔ)充

通過以上代碼，我們實(shí)現(xiàn)了，點(diǎn)擊地圖上不同地方，可以直接跳轉(zhuǎn)到該地方的導(dǎo)航上

2.方法二：獲取點(diǎn)擊事件的位置信息

實(shí)現(xiàn)邏輯

使用 <image> 組件來展示圖片，并結(jié)合 <view> 組件和觸摸事件綁定來實(shí)現(xiàn)點(diǎn)擊功能。

在下面的 handleTap 函數(shù)中，我們使用 event.detail.x 和 event.detail.y 獲取點(diǎn)擊事件的橫坐標(biāo)和縱坐標(biāo)信息。然后，你可以根據(jù)這些坐標(biāo)信息來判斷點(diǎn)擊是否在特定的區(qū)域范圍內(nèi)，并執(zhí)行相應(yīng)的功能邏輯。

wxml界面

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

json界面文章來源地址http://www.zghlxwxcb.cn/news/detail-787594.html

Page({
  handleTap: function(event) {
    // 獲取點(diǎn)擊事件的坐標(biāo)信息
    var x = event.detail.x;
    var y = event.detail.y;
    
    // 根據(jù)坐標(biāo)信息進(jìn)行相應(yīng)的處理邏輯
    // 比如判斷點(diǎn)擊的區(qū)域是否在特定的位置范圍內(nèi)，然后執(zhí)行相應(yīng)的功能
    if (x > 100 && x < 200 && y > 200 && y < 300) {
      // 在特定區(qū)域內(nèi)執(zhí)行的邏輯
      console.log("點(diǎn)擊了特定區(qū)域");
      // 執(zhí)行你的功能代碼
    }
  }
})

到了這里，關(guān)于[微信小程序]在圖片上的特定區(qū)域點(diǎn)擊實(shí)現(xiàn)功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！