vue 百度地图点击marker修改marker图片,其他marker图片不变。

在这里插入图片描述
解决思路,就是直接替换对应marker的图片。获取marker对象判断点击的marker替换成新图片,上一个被点击的就替换成老图片。


          marker.name = 'tag';
          marker.id = i; //一定要设置id,我这里是设置的循环key值,要唯一性。
          map.addOverlay(marker);

          let pointAIcon2= new BMapGL.Icon(require("../xxxxx.png"), new BMapGL.Size(36, 52));
          let pointAIcon1= new BMapGL.Icon(require("../xxxxx.png"), new BMapGL.Size(17, 17));

          let clickFunction = function(v1,v2) {

            return function(event) {
              var allOverlay = map.getOverlays();
              //获取所有marker
              allOverlay.map((item,key) => {
                //oldId是上一个点击的marker id
                if(item.id === that.oldId){
                  //setIcon 是替换marker图片
                  allOverlay[key].setIcon(pointAIcon1);
                }
                //当前点击的marker
                if (item.id === event.target.id) {
                  allOverlay[key].setIcon(pointAIcon2);
                }
              })
                  //延迟保存oldId
              setTimeout(() => {
                  that.oldId=event.target.id
              }, 500);
            };
          }(position.longitude,position.latitude);
          marker.addEventListener("click", clickFunction);
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值