高德marker的鼠标滑过滑出事件和label设置(mouseover mouseout)

最新推荐文章于 2025-07-07 14:21:00 发布

ForwardOn

最新推荐文章于 2025-07-07 14:21:00 发布

阅读量8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：高德地图文章标签：高德地图 mouseover、mouseout label 鼠标滑过滑出事件多个信息窗体

本文链接：https://blog.youkuaiyun.com/ForwardOn/article/details/98479834

鼠标滑过滑出marker事件

添加监听时间，当前缩放级别

AMap.event.addListener(map,'zoomend',function(){
    	//为marker添加滑过滑出监听事件  
    	if (markerSet.size > 0) {
    		markerSet.forEach(function (element, sameElement, set) {
    			//鼠标滑过事件
    			AMap.event.addListener(element, 'mouseover', mouseoverfunc);
    			//鼠标滑出事件
    			AMap.event.addListener(element, 'mouseout', mouseoutfunc);
    	})
	}
});

//注：markerSet是marker的set集合，以上是为每个marker添加监听事件

触发函数

//滑过事件
function mouseoverfunc(e) {
	//设置弹出文本标注
	showOrHideLabel(e.target.orderno, 'mouseover');
}

//滑出事件
function mouseoutfunc(e) {
	//删掉文本标注
	showOrHideLabel(e.target.orderno, 'mouseout');
}

marker文本标注的弹出与删除

/**打开对应的起点或终点marker需要显示的信息  markerSet为marker的set集合*/
function showOrHideLabel(orderno, mousetype) {
	markerSet.forEach(function (element, sameElement, set) {
		if (orderno == ele