baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签
为了解决 label太多,文字会重叠看不清 所以提出这种办法
核心代码

1,创建的时候 将label设置为隐藏
2,通过百度地图监听事件 , mouseover或onmouseover 触发显示
3,通过mouseover 或onmouseover 触发隐藏
// 创建文本标注对象
var label = new BMap.Label(" "+data.data[i][4]+" ", { offset: new BMap.Size(10, -25) });
label.setStyle({
color: "#fff",
border: "0",
padding: "0",
display: "none",
background: "rgba(66,117,202,0.9)",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
marker.setLabel(label); marker.addEventListener("mouseover",function(e){
var label = this.getLabel()
label.setStyle({display:"block"});
});
marker.addEventListener("mouseout",function(e){
var label = this.getLabel()
label.setStyle({display:"none"});
}); map.addOverlay(marker); //将标记添加到地图中
baidu 地图 鼠标移上显示标签 鼠标离开隐藏标签的更多相关文章
- winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色
winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色 先设置奇数行颜色,这个有个自带的属性AlternatingRowsDefaultCellStyle ...
- 鼠标移上显示的下拉菜单,和鼠标移上时显示的导航,html,JavaScript代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 实现点击后创建div,若对div2秒无操作则将div隐藏,鼠标移上div让它不隐藏,移出div超过两秒则div隐藏
$('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- Vue 框架-02-事件:点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...
- 只要把鼠标移上Div方框,方框就自动顺时针旋转
这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...
- iview+vue 表格任一项实现鼠标划上显示内容
在新版本的iview中,表格新增了tooltip功能: 但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动: { // fixed: 'le ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
随机推荐
- java消息中间件 RocketMQ Linux安装与运行
阿里巴巴宣布捐赠RocketMQ到Apache软件基金会孵化项目,最近闲下来便去部署了一个试验版本玩玩. 至于RockeMQ是什么,原理架构什么的这里就不赘述了,这里只记录安装过程. 一.系统环境 s ...
- Bash 脚本语法
每次学了忘,忘了学,怎么记不住,因为长时间不用了 Bash 流程控制 循环 for循环 for item in $list do echo $item done 另一种与C语言类似的写法 ; i< ...
- IMG标签与before,after伪类
在CSS中总有一些你不用不知道,用到才知道的“坑”.比如今天要谈的,把 before, after 伪类用在 <img> 标签上.嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中 ...
- node:fs-extra模块
var fs = require('fs-extra'); //复制 并会覆盖已有文件 fs.copy('./demo/index.html','./demo/index2.html' ,(err) ...
- 类数组arguments
var isArray = function(){ return arguments; } isArray(1,2,3); // 返回[1,2,3] isArray.call(null,1,2,3); ...
- unity获取相机视窗口大小
using UnityEngine; using System.Collections; public class CameraView : MonoBehaviour { private Camer ...
- t d x 示例z
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...
- #学习笔记#e2e学习使用(二)
前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
- 在centos7中安装redis,并通过node.js操作redis
引言 最近在学习node.js 连接redis的模块,所以尝试了一下在虚拟机中安装cent OS7,并安装redis,并使用node.js 操作redis.所以顺便做个笔记. 如有不对的地方,欢迎大家 ...
- VSCode cpptools 插件在Centos 7下不能正确显示符号列表的解决办法
vscode 的插件cpptools 0.9.3 需要glibc 2.18的版本,但是Centos 7 下没有这个版本的GLIBC,所以导致链接库丢失,后台服务不能正常运行.按以下步骤操作可修复此问题 ...