百度地图api为标注设置与删除文字标签

最新推荐文章于 2024-05-20 15:02:03 发布

原创最新推荐文章于 2024-05-20 15:02:03 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #标签 #标注

javascript 同时被 3 个专栏收录

2 篇文章

订阅专栏

html

2 篇文章

订阅专栏

百度地图

0 篇文章

订阅专栏

本文介绍了如何在百度地图API中实现在鼠标移上标注Marker时显示文字标签，以及鼠标离开时删除标签的功能。通过变通方法，实现了Marker的标签显示与移除，满足项目需求。

因项目的需求需要用的百度地图，发现为标注Marker设置文字标签时，只有标签Label的设置与获取，而并没有移除功能，百度后也没有的到可行方法，然后研究一种变通点的方法也实现标签的设置与删除，和大家分享一下。

实现功能：当鼠标移动到标注上时显示文字标签，而离开标注时删除标签。

1、鼠标移上显示标签

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 35.915);//创建一个点
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);               // 将标注添加到地
marker.addEventListener("mouseover",function(e){
<span style="white-space:pre">	</span>marker.setLabel(new BMap.Label("这是一个标签!!!!!!!!!!!!!!",{offset:new BMap.Size(10,-20)}));//为标注设置一个标签
});

鼠标移上的效果

2、鼠标离开移除标签

通过设置标签的样式及内容隐藏标签，达到移除的效果。

marker.addEventListener("mouseout",function(e){
	var label = this.getLabel()
	label.setContent("");//设置标签内容为空
	label.setStyle({borderWidth:"0px"});//设置标签边框宽度为0
});

鼠标离开时效果