高德地圖API之DOM事件+自定義事件

本文轉載自查看原文 2020-03-07 21:15 1327 html / html5 / h5

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 高德地圖API事件-鼠標事件高德地圖自定義樣式高德地圖自定義地圖（樣式無法實現）高德地圖多點標記自定義地圖高德地圖-點擊事件 web開發如何使用高德地圖API（四）通過AMap.Marker自定義標點 Vue中集成高德地圖API實現定位與自定義樣式信息窗體 JS自定義事件（Dom3級事件下） Angular4.x Event (DOM事件和自定義事件) js自定義事件、DOM/偽DOM自定義事件