最近项目中,涉及到了百度地图以及基于百度地图API的开发。在这个过程中,学习到了很多知识,现在将比较关键hover事件记录下来。
首先,实例化地图,并创建标注,代码如下:
const map = new BMap.Map("allmap");
map.centerAndZoom("东平", 12);
const point = new BMap.Point(116.404, 35.915); //创建一个点
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
const marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
其次,为标注添加hover事件,代码如下:
marker.addEventListener("mouseover",function(e){
//为标注设置一个标签
const label = new BMap.Label("这是一个标签!!!",{offset:new BMap.Size(15,-35)});
label.setStyle({
background: '#ff8355',
border: '1px solid "#ff8355"',
borderRadius: "5px",
color: '#fff',
height: "26px",
lineHeight: "26px",
textAlign: "center",
width: "120px",
});
marker.setLabel(label);
});
marker.addEventListener("mouseout",function(e){
const label = this.getLabel();
//设置标签内容为空
label.setContent("");
//设置标签边框宽度为0
label.setStyle({border:"none",width:"0px",padding:"0px"});
});
效果如下: