当前位置： 移动技术网 > IT编程>网页制作>Html5 > 高德地图API，地图类型切换（卫星地图）

高德地图API，地图类型切换（卫星地图）

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

功夫之怒,新大霹雳,我的野蛮奶奶大战戈师奶

常用控件

amap.maptype ：地图类型切换插件，可用于切换卫星地图

首先记得引入插件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.maptype"></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.maptype"></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.549792,29.868388]
        });   

        map.addcontrol(new amap.maptype({
            defaulttype:0 //0代表默认，1代表卫星
        }));
        

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

 

 

右上角多出一个工具，可以切换普通模式和卫星地图模式

 

 

下面展示下放大的卫星地图（zoom 16 的情况下）

 

 

显示路况

<!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.maptype"></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.maptype({
            defaulttype:0, //0代表默认，1代表卫星
            showroad:true//显示路况（右上角也可点击）
        }));
        

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

 

您可能感兴趣的文章:

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

相关文章:

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