微信小程序-如何点击marker触发事件更改图标icon

---

前言

最近在做课设，要求实现一个找附近停车位的功能

绿色marker为空闲车位，红色marker为占用车位，现要求实现点击绿色marker，进行上锁操作，并让绿色锁改为红色锁。

如下图所示：

点击中间绿色锁，跳出弹窗，点击关锁，则锁变红色。

倘若点击红色锁的关锁，则会提示 “该车位已被占用，无法进行该操作”

1、触发事件更改marker图标icon

思路：点击对应marker触发handleMarkerTap()函数，该函数会根据所点击的marker的id，找到对应marker，并将绿色锁的图片地址改成红色锁的图片地址，从而达到更改icon的效果。

而为了辨别车位是否处于占用状态，我们还要在marker里添加title这一属性(取决于你自己，可以是title，可以是used等等)。若没被占用，则title=“空闲”，否则title=“占用”。

2、实现步骤

2.1、wxml页面

重点就是在map组件里加上 bindmarkertap=“handleMarkerTap” 这一行属性，这样我们在点击map组件里的marker的时候，就会触发 handleMarkerTap() 函数。

<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">当前状态: <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库才能使用，这里仅作思路演示，你可以根据实际情况将方法移植到你的代码里。

2.2、js页面代码

首先，handleMarkerTap函数触发的时候，前端会顺便把用户点击的marker信息传入到handleMarkerTap的形参e里面。然后我们就可以利用find函数，根据用户点击的markerId，找到this.data.markers数组里对应的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() 的主要功能是，根据用户点击的marker，找到对应marker车位信息，并将车位信息显示给用户看，还没有进行icon变换的操作。

只有当用户点击了关锁按钮，才会触发Unlock函数，将绿色车位icon改成红色车位icon。

在前端代码中，我们早在关锁按钮button里就将marker的id传入到了Unlock函数形参里：

<button bindtap="Unlock" data-id="{{currentMarker.id}}"
>关锁</button> //currentMarker.id即为上一步你所点击并储存起来的markerId

这里 data-id=“{{currentMarker.id}}” 作用是给Unlock(e)函数传参，即相当于 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 == "空闲"){//空闲状态才可以关锁
        let temp_marker_title = "markers[" + (marker.id-1) + "].title"
        let temp_marker_iconPath = "markers[" +(marker.id-1) + "].iconPath"
        //marker.id-1是因为markers数组是从0开始,这里因人而异，只要能成功修改对应marker就行
        
        this.setData({
            [temp_marker_title] : "占用",
            [temp_marker_iconPath] : Full//改成红色锁的图片地址
        })
    }
    else{
        //如果是占用状态，则禁止开锁
        console.log("已经被占用，无法进行该操作")
    }
  },

总结

至此，我们已经实现了通过点击按钮，触发函数，函数里更改marker的icon地址，从而达到更改marker图标icon的效果。

其实仍然有许多可以改进之处，比如在Unlock(e)函数里直接通过this.data.currentMarker.id获取id即可，可以不用button传参，这里也只是给一些初学者了解一下button传参的方法。