前言

最近在做課設，要求實現(xiàn)一個找附近停車位的功能

綠色marker為空閑車位，紅色marker為占用車位，現(xiàn)要求實現(xiàn)點擊綠色marker，進行上鎖操作，并讓綠色鎖改為紅色鎖。

如下圖所示：

點擊中間綠色鎖，跳出彈窗，點擊關鎖，則鎖變紅色。

倘若點擊紅色鎖的關鎖，則會提示 “該車位已被占用，無法進行該操作”

1、觸發(fā)事件更改marker圖標icon

思路：點擊對應marker觸發(fā)handleMarkerTap()函數(shù)，該函數(shù)會根據(jù)所點擊的marker的id，找到對應marker，并將綠色鎖的圖片地址改成紅色鎖的圖片地址，從而達到更改icon的效果。

而為了辨別車位是否處于占用狀態(tài)，我們還要在marker里添加title這一屬性(取決于你自己，可以是title，可以是used等等)。若沒被占用，則title=“空閑”，否則title=“占用”。

2、實現(xiàn)步驟

2.1、wxml頁面

重點就是在map組件里加上 bindmarkertap=“handleMarkerTap” 這一行屬性，這樣我們在點擊map組件里的marker的時候，就會觸發(fā) handleMarkerTap() 函數(shù)。

<map id="map" style="width:100vw; height:100vh"  
markers="{{markers}}" latitude="{{latitude}}" 
longitude="{{longitude}}" scale="{{scale}}" 
bindmarkertap="handleMarkerTap" >
</map>

<mp-halfScreenDialog show="{{showDialog}}">
    <view slot="title">南京市-勝太西路</view>
    <view slot="desc">{{currentMarker.id}} 號停車位</view>
    <view slot="desc">當前狀態(tài): <text style="color:{{currentMarker.title=='空閑'?'green':'red'}}">{{currentMarker.title}}</text></view>
    <view slot="desc">費用: <text style="color:red"> ￥2/15min </text></view>

    <view slot="footer" >
        <button type="primary" class="weui-btn" bindtap="Unlock" data-id="{{currentMarker.id}}">關鎖</button>
        <button type="primary" class="weui-btn" bindtap="Navigate">導航</button>
    </view>
</mp-halfScreenDialog>

其中 mp-halfScreenDialog組件需要weui庫才能使用，這里僅作思路演示，你可以根據(jù)實際情況將方法移植到你的代碼里。

2.2、js頁面代碼

首先，handleMarkerTap函數(shù)觸發(fā)的時候，前端會順便把用戶點擊的marker信息傳入到handleMarkerTap的形參e里面。然后我們就可以利用find函數(shù)，根據(jù)用戶點擊的markerId，找到this.data.markers數(shù)組里對應的marker，有了這個marker，我們才能對其進行圖片修改操作。

handleMarkerTap(e){
    const marker = this.data.markers.find(item => item.id == e.markerId);
    marker && this.setData({
        currentMarker: marker,	//記錄用戶點擊的marker
        showDialog: true		//點擊marker后跳出關鎖彈窗
    })
  },

同時，在我們點擊marker后，代碼會將showDialog由false改為true，這樣前端頁面的彈窗就會展示出來，然后我們才可以點擊彈窗里的關鎖按鈕進行車位上鎖。

這里 handleMarkerTap() 的主要功能是，根據(jù)用戶點擊的marker，找到對應marker車位信息，并將車位信息顯示給用戶看，還沒有進行icon變換的操作。

只有當用戶點擊了關鎖按鈕，才會觸發(fā)Unlock函數(shù)，將綠色車位icon改成紅色車位icon。

在前端代碼中，我們早在關鎖按鈕button里就將marker的id傳入到了Unlock函數(shù)形參里：

<button bindtap="Unlock" data-id="{{currentMarker.id}}"
>關鎖</button> //currentMarker.id即為上一步你所點擊并儲存起來的markerId

這里 data-id=“{{currentMarker.id}}” 作用是給Unlock(e)函數(shù)傳參，即相當于 e.currentTarget.dataset.id={{currentMarker.id}} 。這樣我們就可以從形參e里拿到拿到用戶點擊的marker的Id(即currentMarker.id)。
拿到Id后，就可以對對應id的marker的圖像iconpath進行修改，即可達到更換icon的效果。

Unlock(e){

    const marker = this.data.markers.find(item => item.id == e.currentTarget.dataset.id);
	//這里和上面總共要find兩次的原因是，第一次是find對應marker用為了拿到車位信息并展示給用戶看
	//這一次的find是為了修改圖片icon顏色，兩次find的目的不同，看你自己需要了
    const Full = "../../images/lock1.png" //占用車位 紅色鎖圖片
    const Empty = "../../images/lock2.png" //空閑車位 綠色鎖圖片
    
    if(marker.title == "空閑"){//空閑狀態(tài)才可以關鎖
        let temp_marker_title = "markers[" + (marker.id-1) + "].title"
        let temp_marker_iconPath = "markers[" +(marker.id-1) + "].iconPath"
        //marker.id-1是因為markers數(shù)組是從0開始,這里因人而異，只要能成功修改對應marker就行
        
        this.setData({
            [temp_marker_title] : "占用",
            [temp_marker_iconPath] : Full//改成紅色鎖的圖片地址
        })
    }
    else{
        //如果是占用狀態(tài)，則禁止開鎖
        console.log("已經(jīng)被占用，無法進行該操作")
    }
  },

總結

至此，我們已經(jīng)實現(xiàn)了通過點擊按鈕，觸發(fā)函數(shù)，函數(shù)里更改marker的icon地址，從而達到更改marker圖標icon的效果。

其實仍然有許多可以改進之處，比如在Unlock(e)函數(shù)里直接通過this.data.currentMarker.id獲取id即可，可以不用button傳參，這里也只是給一些初學者了解一下button傳參的方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-778318.html

到了這里，關于微信小程序-如何點擊marker觸發(fā)事件更改圖標icon的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！