百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

为宾馆选项绑定鼠标滑过事件

这一小节我们需要实现当鼠标移入选项时在相应宾馆标注下发显示自定义覆盖物,鼠标移出时移除覆盖物功能。

覆盖物

原理

功能实现简单,前面我们已经介绍了自定义覆盖物,只需要用for循环为每个选项绑定onmouseover和onmouseout事件,鼠标移入生成自定义覆盖物,移出则移除覆盖物。

function addListen(hotelInfo){
    var hotelI = document.getElementsByClassName('hotel');
    for(var i=0 ; i<hotelI.length; i++) {
        hotelI[i].myCompOverlay = new ComplexCustomOverlay(new BMap.Point(hotelInfo[i].location[0], hotelInfo[i].location[1]), hotelInfo[i]);
        hotelI[i].onmouseover = function () {
            map.addOverlay(this.myCompOverlay);
        };
        hotelI[i].onmouseout = function () {
            map.removeOverlay(this.myCompOverlay);
        };
    }
}
在右方填入代码,为宾馆选项绑定鼠标滑过事件。
addListen(hotelInfo);