vue 百度地图点击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);

最近更新

  1. TCP协议是安全的吗?

    2024-05-10 20:00:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-10 20:00:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-10 20:00:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-10 20:00:03       18 阅读

热门阅读

  1. 【Vue3源码学习】— CH3.5 renderer 详解

    2024-05-10 20:00:03       9 阅读
  2. TypeScript type类型别名

    2024-05-10 20:00:03       10 阅读
  3. Qt QShortcut快捷键类详解

    2024-05-10 20:00:03       10 阅读
  4. 十二届蓝桥杯Python组3月中/高级试题 第二题

    2024-05-10 20:00:03       10 阅读
  5. 智密腾讯云直播组建--准备腾讯云环境

    2024-05-10 20:00:03       10 阅读
  6. html中的整体布局该如何做

    2024-05-10 20:00:03       9 阅读
  7. nginx常用内置变量

    2024-05-10 20:00:03       10 阅读
  8. 在编程中,什么是类的继承?

    2024-05-10 20:00:03       10 阅读
  9. 获取最新的CVE信息

    2024-05-10 20:00:03       9 阅读
  10. 【Redis7】10大数据类型之Bitmap类型

    2024-05-10 20:00:03       8 阅读
  11. 【数据流图】用JointJs实现数据流图(二)

    2024-05-10 20:00:03       10 阅读
  12. 代码随想录 | 总结篇

    2024-05-10 20:00:03       8 阅读