高德地图marker屏蔽Label

前几年用的方法如下:

//显示label
 g_marker[SetIndex].setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
            offset: new AMap.Pixel(20, -25),//修改label相对于maker的位置
            content: "标签名称",
             direction: 'right' //设置文本标注方位
        });

//隐藏只需要将content设置为空
 g_marker[ResetIndex].setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
            content: null
        });

但是上面这个方法不知道在今年什么时候无效了,表现为单步模式下,可以隐藏label,全速运行无法隐藏。

切换选择点后没有隐藏之前的。

通过查看高德地图api发现最近有更新,通过尝试,发现只要将content设置为空就不生效,应该是内部做了判断,判断传入参数是否为null,为null则不更新,测试发现可以通过class属性修改。

首先写2个样式,一个是正常显示的,一个用于隐藏,如下:

<style>

        .amap-marker-label {
            border: 0;
            background-color: #aacefa;
        }

        .info {/*正常标签样式*/
            position: relative;
            top: 0;
            right: 0;
            min-width: 0;
        }

        .hide_info { /*隐藏标签样式*/
            display: none;
        }
    </style>

代码如下:

//显示,增加了样式
 g_marker[SetIndex].setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
            offset: new AMap.Pixel(20, -25),//修改label相对于maker的位置
            //content: g_marker[SetIndex].NAME
            content: "<div class='info'>" + g_marker[SetIndex].NAME + "</div>",
             direction: 'right' //设置文本标注方位
        });


//隐藏
 g_marker[ResetIndex].setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
            content: "<div class='hide_info'></div>"
        });

现在切换后可以像以前一样,正常隐藏上一个label了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cp1300

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值