【求助】百度地图label事件多次执行

问题点
一、当鼠标移动到覆盖物上时候mouseover事件会执行多次，初步估计是tpl那里，每个元素都被绑定上了事件；
二、当鼠标移动到覆盖物上时，能否在两秒后触发某个动作，不如mouseover两秒以上时，会触发一次ajax请求，不足两秒就不执行ajax；望高手解答疑惑，谢谢！代码如下<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<style>
html,body,.container,ul, li, p{margin:0; padding: 0; font-size: 14px;}
.header{height: 60px; border-bottom: 1px solid #ccc; text-align: center;}
.header ul {width: 700px; padding: 8px;}
.header li {float: left; list-style: none; padding-top:10px; width: 80px; height: 32px; border: 1px solid #ccc; margin-right: 5px; }
#baidumap{position: absolute; width: 100%; bottom: 0; top: 61px;}
.data-list{position: absolute; top: 61px; width: 400px; bottom: 0; background-color: #fff; border-right: 1px solid #ccc;} /* 解决聚合区域覆盖问题 */
.BMapLabel:hover{ background: rgba(244, 84, 84, 0.9)!important; z-index: 100!important;}
.BMapLabel:hover .arrow-up{border-top-color: rgb(244, 84, 84);} .labelfocus{ background: #6CB028!important; z-index: 999999!important;} .arrow-up {
border: 4px solid transparent;
border-top-width: 6px;
border-top-color: rgb(84,144,244);
display: block;
width: 0;
height: 0;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/jquery2.1.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=ditcpblpgtmQ5mvuvPEf6UC8UQcdGGql"></script>
<title>百度地图仿搜房网效果</title></head>
<body>
<div class="container">
<div class="header">
<ul>
<li>区域</li>
<li>板块</li>
<li>售价</li>
<li>房型</li>
<li>面积</li>
<li>楼层</li>
<li>朝向</li>
</ul>
</div>
<div id="baidumap"></div>
<div class="data-list">list</div>
</div>
</body>
</html><script type="text/javascript">
    var plys = {},
        boundary = new BMap.Boundary(),
        map = new BMap.Map("baidumap", {enableMapClick: false, minZoom: 6, maxZoom: 22});
    map.centerAndZoom(new BMap.Point(103.935791, 30.603137), 16);
map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.NavigationControl({
        type: BMAP_NAVIGATION_CONTROL_ZOOM,
        enableGeolocation: true,
        anchor: BMAP_ANCHOR_TOP_RIGHT
    }));
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
    map.enableScrollWheelZoom(true);    var data = [{
        "id": "1611063586959",
        "name": "新双城",
        "longitude": 103.946769,
        "latitude": 30.605466,
        "count": 28
    }, {
        "id": "3011054948349",
        "name": "远大林语城",
        "longitude": 103.932846,
        "latitude": 30.607269,
        "count": 29
    }, {
        "id": "167335575039116",
        "name": "贵通御苑雙楠城",
        "longitude": 103.923841,
        "latitude": 30.61448,
        "count": 31
    }, {
        "id": "3011054352087",
        "name": "富豪新岸",
        "longitude": 103.92213,
        "latitude": 30.60201,
        "count": 32
    }, {
        "id": "3011054907589",
        "name": "佳兆业威登郡",
        "longitude": 103.935791,
        "latitude": 30.603137,
        "count": 32
    }];    function addOverlay(overlay) {
        $.each(overlay, function(index, data) {
            var point = new BMap.Point(data.longitude, data.latitude);
            //自定义label样式
            var tpl = '<p style="height: 24px; line-height: 24px; cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.3);" data-id="infobox-'+data.id+'">' +
                '<i style="padding: 0 3px; display: inline-block; border-radius: 2px;  min-width: 40px; color: #FFF; font-weight: 400; font-style: normal;">' +
                '<span>' + data.name + '&nbsp;&nbsp;' + data.count + '套</span></i>' +
                '<i class="arrow-up"></i>' +
                '</p>';
            var myLabel = new BMap.Label(tpl,
                {
                    position: point,
                    offset: new BMap.Size(-52, -27)
                });
            myLabel.setStyle({
                width: "",
                height: "25px",
                border: "0",
                background: "rgba(84,144,244,.9)",
                borderRadius:"5%",
                cursor: "pointer"
            });
            myLabel.setTitle(data.name);
            map.addOverlay(myLabel);            // 显示楼盘简介信息
// 问题点在这里，这个mouseover事件会执行多次
            myLabel.addEventListener("mouseover", function (event) {
                //event.domEvent.stopPropagation();
                //event.domEvent.preventDefault();
                console.log(Math.random());            });
            myLabel.addEventListener("mouseout", function (event) {            });            // 加载当前楼盘房源信息,点中改变颜色
            myLabel.addEventListener("click", function (event) {
                $('p[data-id=infobox-'+data.id+']').addClass('labelfocus');
            });        });
    }
    
    addOverlay(data);
</script>

解决方案 »

  1.   

    不要用mouseover，用mouseenter和mouseleave。鼠标移入和移出时记录当前的时间戳，然后鼠标移出的时候计算间隔时间，如果不足两秒则不发送请求。
      

  2.   

    var tpl = '<p style="height: 24px; line-height: 24px; cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.3);" data-id="infobox-'+data.id+'">' +
                    '<i style="padding: 0 3px; display: inline-block; border-radius: 2px;  min-width: 40px; color: #FFF; font-weight: 400; font-style: normal;">' +
                    '<span>' + data.name + '&nbsp;&nbsp;' + data.count + '套</span></i>' +
                    '<i class="arrow-up"></i>' +
                    '</p>';怀疑是你这个tpl下的每个节点，都有触发mouseover事件。
    可以把tpl改成 '<span>' + data.name + '&nbsp;&nbsp;' + data.count + '套</span>，以验证我的上述猜想。
    如果证实了猜想正确，可以试着阻止事件冒泡或捕获，或者使用tpl中节点的mouseover事件而不是使用百度API中的事件
      

  3.   

    谢谢解答，百度api没有这两个事件