百度地图API接口下，创建标注的hover事件。

来源：互联网发布：林心如人设崩塌知乎编辑：程序博客网时间：2024/05/19 20:48

最近项目中，涉及到了百度地图以及基于百度地图API的开发。在这个过程中，学习到了很多知识，现在将比较关键hover事件记录下来。

首先，实例化地图，并创建标注，代码如下：

var map = new BMap.Map("allmap");
map.centerAndZoom("东平", 12);
var point = new BMap.Point(116.404, 35.915);//创建一个点
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);

其次，为标注添加hover事件，代码如下：

marker.addEventListener("mouseover",function(e){
var label = new BMap.Label("这是一个标签!!!",{offset:new BMap.Size(15,-35)});//为标注设置一个标签
label.setStyle({
width: "120px",
color: '#fff',
background: '#ff8355',
border: '1px solid "#ff8355"',
borderRadius: "5px",
textAlign: "center",
height: "26px",
lineHeight: "26px"
});
marker.setLabel(label);
});
marker.addEventListener("mouseout",function(e){
var label = this.getLabel();
label.setContent("");//设置标签内容为空
label.setStyle({border:"none",width:"0px",padding:"0px"});//设置标签边框宽度为0
});

效果如下：

0 0