高德地图中隐藏Marker的标记

在开发高德地图时,可以使用Marker的setLabel()函数设置浮动标记。

做了一个功能,每选中一个点时,在上方显示文字信息。

marker.setLabel({direction:'top',offset:new AMap.Pixel(0,0),content:'<div id="activelabel">这是被选中的点</div>'});

效果如下图所示:

如果选择另一个点,需要将当前所选点的浮动标记信息去掉。如下图所示:

但是,Marker对象中只有setLabel()和getLabel()两个函数,并没有提供removeLabel()函数。

有人建议使用marker.setLabel(''), marker.setLabel('none'), marker.setLabel(null)等函数,经测试均无效。

试了一下,在setLabel()时,将content内容设置为空,如下:

marker.setLabel({direction:'top',offset:new AMap.Pixel(0,0),content:'<div id="activelabel"></div>'});

用这个方法,文字没有了,但是div的方框还在。有人将Label所在的div的边框设置为0宽度,并将div的底色设置为透明,也达到了隐藏已有的标记的效果。

但我觉得应该有更好的办法。

经分析思考,认为浮动标记无非是div标签。只要找到该标签,将其设置为不显示即可。

于是:

var active_label = document.getElementById("activelabel"); //通过名字获取自定义标签的div对象

var active_label_top = active_label.parentNode; //获取上一级div对象

active_label_top.removeChild(active_label); //删除自定义的标签

active_label_top.style.visibility='hidden'; //将Label所在标签设置为隐藏。

经测试,该方法可以隐藏已显示的Marker的浮动标签。同时,当使用setLabel()函数再次选择该点时,仍然会出现浮动标签。说明该函数重新创建了浮动标签,其visibility属性被设置为可见。

你可以在高德地图Marker对象中添加鼠标事件监听器,来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下: 1. 创建Marker对象时,设置label属性为一个AMap.Text对象,用于显示详细信息。 ```javascript var marker = new AMap.Marker({ position: [lng, lat], label: { content: '详细信息', offset: new AMap.Pixel(0, -20) // 设置label偏移量,使其显示在Marker上方 } }); ``` 2.Marker对象添加mouseover和mouseout事件监听器,在鼠标移入和移出时显示或隐藏label。 ```javascript marker.on('mouseover', function (e) { marker.setLabel({ content: '详细信息', offset: new AMap.Pixel(0, -20), visible: true // 显示label }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false // 隐藏label }); }); ``` 完整的代码示例: ```javascript var map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923] }); var markers = [ {lnglat: [116.405285, 39.904989], info: '北京市'}, {lnglat: [121.472644, 31.231706], info: '上海市'}, {lnglat: [113.280637, 23.125178], info: '广州市'}, {lnglat: [114.066112, 22.548515], info: '深圳市'} ]; for (var i = 0; i < markers.length; i++) { var marker = new AMap.Marker({ position: markers[i].lnglat, label: { content: markers[i].info, offset: new AMap.Pixel(0, -20) } }); marker.on('mouseover', function (e) { marker.setLabel({ content: e.target.getExtData().info, offset: new AMap.Pixel(0, -20), visible: true }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false }); }); marker.setExtData(markers[i]); // 将详细信息存储在Marker对象的扩展数据中 marker.setMap(map); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值