当前位置： 移动技术网 > IT编程>网页制作>Html5 > 高德地图API之缩放比例尺控件+3D转换

高德地图API之缩放比例尺控件+3D转换

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

388棋牌登入-上鼎狐网,培正梦飞翔,莫斯科2017迅雷下载

缩放比例尺控件

首先引入控件 amap.scale

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.scale"></script>

然后使用 map.addcontrol() 添加控件

<!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.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:11,
            center:[121.54979200000002,29.868388]
        });        

        //添加控件-比例尺控件
        map.addcontrol(new amap.scale());

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

 

 可以看到下面多了比例尺工具

 

添加工具条 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.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:11,
            center:[121.54979200000002,29.868388]
        });        

        //添加控件-比例尺控件
        map.addcontrol(new amap.scale());
        //添加控件-工具条控件
        map.addcontrol(new amap.toolbar());

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

 

 

3d转换

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

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388],
            pitch:90,//设置倾斜角度
            viewmode:"3d",//默认2d
            buildinganimation:true//建筑出现的动画
        });        

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

 

 

添加控制条手动切换2d/3d

首先引入控制条

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.controlbar"></script> 
<!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.controlbar"></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:11,
            center:[121.54979200000002,29.868388],
            pitch:90,//设置倾斜角度
            viewmode:"3d",//默认2d
            buildinganimation:true//建筑出现的动画
        });   

        //添加控件
        map.addcontrol(new amap.controlbar({
            showzoombar:true,//调整zoom
            showcontrolbutton:true,//是否有倾斜旋转角度的功能，默认是true
            position:{
                right:"50px",
                top:"30px"
            },//调整控件位置

        }));  

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

 

您可能感兴趣的文章:

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

相关文章:

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