JavaScript实现百度地图鼠标悬停显示与隐藏标注

作者:纸飞机

时间:2026-10-29

浏览:462

本文介绍如何利用JavaScript控制百度地图标注的Label在鼠标悬停时显示、移出时隐藏。核心思路是通过监听mouseover和mouseout事件,动态修改Label的CSS display属性,实现交互效果。

文章目录

百度地图Label鼠标悬停显示隐藏实现

实现该功能的核心思路是通过为Label设置CSS样式来控制其可见性。具体操作步骤如下:


var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
  label.setStyle({ 
     display:"none" //给label设置样式,任意的CSS都是可以的
  });
marker.setLabel(label);
 
marker.addEventListener("mouseover", function(){ 
  label.setStyle({  //给label设置样式,任意的CSS都是可以的
    display:"block"
  });
     
}); 
 
marker.addEventListener("mouseout", function(){ 
  label.setStyle({  //给label设置样式,任意的CSS都是可以的
    display:"none"
  }); 
});

以上内容为本文分享的全部实现方法,希望能为学习JavaScript开发百度地图应用提供参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章