zoukankan html css js c++ java

高德地图API事件-鼠标事件

覆盖物状态改变时触发的事件

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>

查看全文

相关阅读:
opencv 图片像素x,y 访问！！！
python numpy 三维数组排序问题
 python+opencv水表识别
 tesseractOCR安装
 cookie 的寻找和使用以及页面滚动（python+selenium）
你还在用a标签吗？——用button替代a
js正则高级函数（replace，matchAll用法），实现正则替换（实测很有效）
腾讯云服务器centos7.2+nginx（开启gzip压缩）+uwsgi+Django+react
轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
 webstorm 添加css前缀（兼容）自动添加

原文地址：https://www.cnblogs.com/chenyingying0/p/12436854.html