在业务处理中出现一个需求，要求在百度地图中画圆。并且在改变圆的半径后需要触发相关的事件！研究了一下百度地图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就放弃掉!
如果各位有更好的方法，欢迎留言！
网友评论