vue-amap 单击marker点高亮显示

Question

我使用vue-amap组件显示marker点，部分代码如下

<el-amap-marker v-for="marker in markers" :key="marker.index" :position="marker.position" :events="marker.events" ></el-amap-marker>

在下方method方法中的显示marker的方法中，点击事件e.target.setIcon(afticon);成功在点击后变换红色图标，结果如下

let afticon=new AMap.Icon({
        size: new AMap.Size(19, 31),//图标大小
        imageSize:new AMap.Size(19, 31),
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png"
      });
markers.push({
          position: item.position,
          offset: new AMap.Pixel(0, 0),
          icon:null, //不设置默认蓝色水滴
          events: {
            click(e) {
              e.target.setIcon(afticon);
              //this.$refs.map.$$getInstance().setFitView(item.position[index]);
              that.srcList1 = that.srcLists1[index];
              //that.window = that.windows[index];
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows1.forEach((window1) => {
                window1.visible = false; // 关闭窗体
              });
              that.window1 = that.windows1[index];
              that.$nextTick(() => {
                that.window1.visible = true;
                //that.$refs.map.$$getInstance().setFitView(item.position[index])
              });
            },
          },
        });

但如何写使得点击下一个点之后，前一个点可以变回原来的蓝色图标

Answer 1

写一个watch监听事件，如果当前的是红色，上一个显示active的红色图标取消，最好设置一个标志位，

//data里面定义显示红色图标的标志
showred:false;
//然后点击的方法里面{
this.showred = true;
}
这种方式最简单