高德地圖API事件-滑鼠事件_ZenDei技術網路在線

高德地圖API事件-滑鼠事件

-Advertisement-

覆蓋物狀態改變時觸發的事件 mousemove mouseover mouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javasc ...

覆蓋物狀態改變時觸發的事件

mousemove mouseover mouseout

<!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;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11,
            center:[121.549792,29.868388],
            resizeEnable:true//不開啟則無法觸發resize事件
        });   

        var txt=new AMap.Text({
            text:"覆蓋物事件",
            position:[121.549792,29.868388]
        }).on("mouseover",function(){
            console.log("覆蓋物移入");
        }).on("mouseout",function(){
            console.log("覆蓋物移出");
        }).on("mousemove",function(){
            console.log("覆蓋物上移動中");
        })

        txt.setMap(map);

    </script>    
</body>
</html>

show hide

<!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;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11,
            center:[121.549792,29.868388],
            resizeEnable:true//不開啟則無法觸發resize事件
        });   

        //矢量圖--圓
        var circle=new AMap.Circle({
            center:[121.549792,29.868388],
            radius:1000
        })

        circle.setMap(map);

        //矢量圖--方
        var rect=new AMap.Rectangle({
            bounds:new AMap.Bounds(new AMap.LngLat(121.549792,29.868388),new AMap.LngLat(121.569792,29.848388))
        })

        rect.setMap(map);

        setTimeout(function(){
            circle.hide();
        },2000)
        setTimeout(function(){
            rect.hide();
        },4000)
        setTimeout(function(){
            circle.show();
        },6000)
        setTimeout(function(){
            rect.show();
        },8000)

    </script>    
</body>
</html>

open() close()

ContextMenu指的是右鍵

map.zoomIn() map.zoomOut()

<!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;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11,
            center:[121.549792,29.868388],
            resizeEnable:true//不開啟則無法觸發resize事件
        });   

        var cm=new AMap.ContextMenu();
        cm.addItem("放大一級",function(){
            map.zoomIn();//放大一級map的級別
        },0)
        cm.addItem("縮小一級",function(){
            map.zoomOut();//縮小一級map的級別
        },1)

        map.on("rightclick",function(e){
            console.log(e.lnglat);
            cm.open(map,e.lnglat);

            //右鍵3秒後關閉
            setTimeout(function(){
                cm.close();
            },3000)
        })
        

    </script>    
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

mongoose-面向對象操作mongodb的Nodejs框架

介紹無論是mysql還是mongodb，傳統的與資料庫交互的方式都是按照他們提供的API來寫代碼。它們提供的API往往不是很容易理解，而且難以記憶，如果傳錯了參數，寫錯一個符號都要查文檔。 ORM（對象關係映射，Object Relational Mapping）框架，允許我們面向對象操作，不需要 ...
純CSS實現帶返回頂部右側懸浮菜單

這是我做個人網頁的時候加上的帶返回頂部右側懸浮菜單效果，如下圖，使用工具是Hbuilder。代碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type ...
ES6 - 基礎學習(15): 擴展運算符和 rest參數合集

前面學習了數組的擴展運算符、函數的rest參數，都是…(三個點)。它們不僅長得很像，而且有很多相似之處，甚至很多時候都不用特意去區分它們。擴展運算符擴展運算符(spread)(形如：...)，有點像 rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。 rest參數 rest參數(形如： ...
本地存儲localStorage和sessionStorage

cookie劣勢：存儲大小限制，4kb 單功能變數名稱下有數量限制，50個左右污染請求頭，浪費流量本地存儲web storage 包括localStorage和sessionStorage localStorage 本身是一個對象，可以列印查看 <!DOCTYPE html> <html lang=" ...
# ES6學習筆記（四）：教你理解ES6的新增語法

let ES6新增的用於聲明變數的關鍵字 let聲明的變數只在所處於的塊級有效不存在變數提升暫時性死區註意：使用let 關鍵字聲明的變數才具有塊級作用域，使用var聲明的變數不具備塊級作用域特性。在一個大括弧中，使用let 關鍵字聲明的變數才具有塊級作用域，var關鍵字是不具備這個特點的。 ...
jQuery的語法

jQuery的語法相對容易，而且插件豐富，功能強大$(" ") 用來選擇表簽，可以是$("span") 直接選擇 <span>$("#abc") 選擇 ID 為 abc 的標簽$(".abc") 選擇class 為 abc 的標簽html( ) 是函數意思是把() 里的內容放到指定標簽里$(".f ...
高德地圖API實例--移動端婚禮請帖

效果圖首先添加移動端meta <meta name="viewport" content="initial-scale=1.0,user-scaleble=no,width=device-width"> <!DOCTYPE html> <html lang="en"> <head> <meta c ...
高德地圖API之DOM事件+自定義事件

AMap.event.addDomListener() 綁定事件 AMap.event.removeListener() 解綁事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <s ...