百度地图画圆半径改变触发事件

在业务处理中出现一个需求，要求在百度地图中画圆。并且在改变圆的半径后需要触发相关的事件！研究了一下百度地图js的API。貌似并没有相关的监听事件，遂通过一系列的逻辑判定来实现相关的功能。

<!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" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{height:500px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <title>圆形半径改变监听</title>
</head>
<body>
<div id="allmap"></div>
<button type="button" onclick="removeText()">清除</button>
<div id="r-result">

</div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,enableEditing:true}); //创建圆

    map.addOverlay(circle);//在地图上显示圆形覆盖物
    //中间变量，用于判定是否触发业务事件
    let flag = true;
    //首先监听圆形的属性改变事件
    circle.addEventListener("lineupdate", function (e) {
        var p = e.target;
       //每次触发后将中间变量还原
        flag = true;
        $("#r-result").append("圆的半径为："+p.getRadius());
        //其次监听改变事件鼠标离开事件
        p.addEventListener("onmouseout",function (e1) {
            let pd = e1.target;
           //判断实际圆的半径与鼠标离开时的半径是否相等(此步骤可省略,但是为了避免特殊情况的发生,还是加上)
            if(circle.getRadius() == pd.getRadius() ){
                //当次改变是否需要触发
                if(flag){
                    $("#r-result").append("触发业务事件!!!!");
                }
               //触发一次后将不在触发
                flag = false;
            }
        })
    });


    function removeText() {
        $("#r-result").text("");
    }
</script>

原理

lineupdate事件在不断改变圆形半径时会不断的触发,但是此时onmouseout不会随着lineupdate事件的触发而触发.而是需要等到松开鼠标并且离开圆的时候才会统一触发(重点:松开并离开圆形).
就是说当你松开鼠标并离开圆的时候会触发多个onmouseout事件,但是这个时候多个onmouseout中的圆的属性都是相同的(至少笔者没有发现什么不同,如果各位看官有新的发现,欢迎留言).之所以要加一个if(circle.getRadius() == pd.getRadius() )主要是为了避免特殊的情况发生,从而导致业务逻辑错误!然后在通过中间变量来控制第一个onmouseout事件来实现想要的结果,其余的onmouseout就放弃掉!
如果各位有更好的方法，欢迎留言！

百度地图 画圆半径改变触发事件

原理

百度地图画圆半径改变触发事件