当前位置： 移动技术网 > IT编程>网页制作>Html5 > 高德地图API之DOM事件+自定义事件

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

仙境传说rbo单机版,孔卡简历,公务员考题

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>

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网