当前位置: 首页 > news >正文

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();//获取所有markerallOverlay.map((item,key) => {//oldId是上一个点击的marker idif(item.id === that.oldId){//setIcon 是替换marker图片allOverlay[key].setIcon(pointAIcon1);}//当前点击的markerif (item.id === event.target.id) {allOverlay[key].setIcon(pointAIcon2);}})//延迟保存oldIdsetTimeout(() => {that.oldId=event.target.id}, 500);};}(position.longitude,position.latitude);marker.addEventListener("click", clickFunction);
http://www.lryc.cn/news/349174.html

相关文章:

  • 【Javaer学习Python】 1、Django安装
  • SSL协议
  • 什么情况下会造成索引失效?
  • 间隔采样视频的代码
  • C++ QT设计模式 (第二版)
  • 【经验总结】超算互联网服务器 transformers 加载本地模型
  • ubuntu编译pcl时报错
  • Rust中的单元测试
  • ubuntu18.04系统安装pangolin
  • 洛谷P10397题解
  • 【Linux】自动化编译工具——make/makefile(超细图例详解!!)
  • goroutine调度策略
  • TypeScript中`unknown`的使用场景:安全处理未知类型
  • react18【系列实用教程】JSX (2024最新版)
  • Docker 创建网络
  • ASME美国机械工程师学会文献如何查询下载经验分享
  • Spring MVC分页示例
  • C++基础——继承(上)
  • 编译安装Python3
  • MySQL数据库核心面试题
  • Golang | Leetcode Golang题解之第85题最大矩形
  • Linux基础知识面试题
  • 中国高分辨率国家土壤信息网格基本属性数据集(2010-2018)
  • 数据仓库项目---Day01
  • 若依生成树表和下拉框选择树表结构(在其他页面使用该下拉框输入)
  • 考研数学|李林《880》做不动,怎么办!?看这一篇!
  • paddle ocr 版面分析
  • 25. K 个一组翻转链表 - 力扣(LeetCode)
  • 使用 GPT-4-turbo+Streamlit+wiki+calculator构建Math Agents应用【Step by Step】
  • [240514] OpenAI 发布 GPT-4o,人机交互的历史性时刻 | 苹果芯片进军服务器剑指AI​ | 谷歌大会以AI为主