当前位置： 移动技术网 > IT编程>网页制作>Html5 > 高德地图API常用控件的添加与删除（鹰眼、工具条、比例尺）

高德地图API常用控件的添加与删除（鹰眼、工具条、比例尺）

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

鹰眼插件 amap.overview

默认在地图右下角显示缩略图

<!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&plugin=amap.overview"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   

        map.addcontrol(new amap.overview({
        }));
        

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

这是不加参数的效果，右下角能看到一个小箭头，点击后出现缩略图

 

 

地图比例尺插件 amap.scale 

无参数情况

<!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&plugin=amap.overview,amap.scale "></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   
        //鹰眼
        map.addcontrol(new amap.overview());
        //比例尺
        map.addcontrol(new amap.scale());
        

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

 

 

amap.toolbar 工具条插件，控制缩放和平移

<!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&plugin=amap.overview,amap.scale,amap.toolbar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   
        //鹰眼
        map.addcontrol(new amap.overview());
        //比例尺
        map.addcontrol(new amap.scale());
        //工具条
        map.addcontrol(new amap.toolbar());
        

    </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&plugin=amap.overview,amap.scale,amap.toolbar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        }); 

        //鹰眼
        var ov=new amap.overview({
            visible:true//默认显示和隐藏
        });
        map.addcontrol(ov);

        //2s后隐藏鹰眼插件
        settimeout(function(){
            ov.hide();
        },2000);

        //4s后显示鹰眼插件
        settimeout(function(){
            ov.show();
        },4000);

        //比例尺
        map.addcontrol(new amap.scale());
        //工具条
        map.addcontrol(new amap.toolbar());
        

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

 

通过按钮来控制不同控件的显示和隐藏

<!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&plugin=amap.overview,amap.scale,amap.toolbar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #panel{width:200px; height: 50px;top:20px;right:20px;position: absolute;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel">
        <button id="yy">鹰眼</button>
        <button id="gjt">工具条</button>
        <button id="blc">比例尺</button>
    </div>

    <script>
        var map=new amap.map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        }); 

        //鹰眼
        var ov=new amap.overview({
            visible:true//默认显示和隐藏
        });
        //比例尺
        var os=new amap.scale();
        //工具条
        var ot=new amap.toolbar();

        map.addcontrol(ov);
        map.addcontrol(os);
        map.addcontrol(ot);

        var yyshow=blcshow=gjtshow=true;//默认显示

        yy.onclick=function(){
            yyshow=!yyshow;
            if(yyshow){
                ov.show();
            }else{
                ov.hide();
            }
        }
        gjt.onclick=function(){
            gjtshow=!gjtshow;
            if(gjtshow){
                ot.show();
            }else{
                ot.hide();
            }
        }
        blc.onclick=function(){
            blcshow=!blcshow;
            if(blcshow){
                os.show();
            }else{
                os.hide();
            }
        }

        

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

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