高德地图API之DOM事件+自定义事件
程序员文章站
2022-05-03 21:59:02
AMap.event.addDomListener() 绑定事件 AMap.event.removeListener() 解绑事件 map
amap.event.adddomlistener() 绑定事件
amap.event.removelistener() 解绑事件
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} #box{position: absolute;top:20px;right:20px;width:100px;height:50px;background-color: #fff;z-index:10;} </style> </head> <body> <div id="container"></div> <div id="box"> <button id="btn1">绑定事件</button> <button id="btn2">解除绑定</button> </div> <script> var map=new amap.map("container",{ zoom:11, center:[121.549792,29.868388], resizeenable:true//不开启则无法触发resize事件 }); var lis1=amap.event.adddomlistener(btn1,"click",function(){ map.zoomin(); }) amap.event.adddomlistener(btn2,"click",function(){ amap.event.removelistener(lis1); }) </script> </body> </html>
自定义事件
1、使用 amap.event.addlistener() 或者 on 来进行绑定
2、使用 emit 方法进行事件派发
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> <style> *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 100%;top:0;left:0;position: absolute; } #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;} #box{position: absolute;top:20px;right:20px;width:100px;height:50px;background-color: #fff;z-index:10;} </style> </head> <body> <div id="container"></div> <script> var map=new amap.map("container",{ zoom:11, center:[121.549792,29.868388], resizeenable:true//不开启则无法触发resize事件 }); var count=0; function _myfn(){ console.log("使用amap.event.addlistener绑定事件"); //触发count map.emit("count",{count:count+=1});//第二步 } function _count(){ console.log(count);//第四步 } amap.event.addlistener(map,"click",_myfn);//第一步 //on监听变量的改变 map.on("count",_count);//第三步 </script> </body> </html>