欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

高德地图API之DOM事件+自定义事件

程序员文章站 2022-09-27 10:31:08
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>

高德地图API之DOM事件+自定义事件

 

 

自定义事件

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>

高德地图API之DOM事件+自定义事件