高德地圖API之縮放比例尺控件+3D轉換

本文轉載自查看原文 2020-03-07 14:27 1840 html / html5 / h5

縮放比例尺控件

首先引入控件 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>

免責聲明！

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

猜您在找 高德地圖api比例尺高德地圖——添加比例尺控件高德地圖API常用控件的添加與刪除（鷹眼、工具條、比例尺）地圖比例尺與高德地圖中的縮放級別（0-20）的映射關系與轉換方法高德地圖iOS SDK限制地圖的縮放比例百度地圖之添加控件——比例尺、縮略圖、平移縮放百度地圖API示例之添加/刪除工具條、比例尺控件地圖精度與比例尺的關系 D3基礎---比例尺高德地圖——2D轉換3D