百度地图API实战 互动版

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

为标注绑定鼠标滑过事件

这一小节我们将实现滑过标注出现自定义覆盖物功能。

1、实现原理

为标注绑定鼠标滑过事件与上一节原理相同,但是有点不同的是我们同时还为标注绑定了鼠标点击事件,为了避免滑过后点击出现信息栏和自定义覆盖物同时存在,我们需要在点击时加入移除覆盖物事件。

2、改造addMarker函数

我们只需在标注添加时为其绑定鼠标事件

function addMarker(hotel){
    var marker = new BMap.Marker(new BMap.Point(hotel.location[0],hotel.location[1]));
    map.addOverlay(marker);
    marker.addEventListener('click', function () {
        map.removeOverlay(myCompOverlay);
        var infoWindow = prodInfoWindow(hotel);
        this.openInfoWindow(infoWindow);
    });
    marker.addEventListener('mouseover',function(){
        myCompOverlay = new ComplexCustomOverlay(new BMap.Point(hotel.location[0],hotel.location[1]), hotel);
        map.addOverlay(myCompOverlay);
    });
    marker.addEventListener('mouseout',function(){
        map.removeOverlay(myCompOverlay);
    });
}

这样我们地图算是完成大半,大家加油

在右侧代码框中填入相应代码,为mouseout绑定相应的事件
marker.addEventListener('mouseout',function(){ map.removeOverlay(myCompOverlay); });