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

最近项目中,涉及到了百度地图以及基于百度地图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"});
});

效果如下:

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值