**详情效果请参见https://myblog.buluoxu.club/HTML/webgis/02%E5%9C%B0%E5%9B%BE%E5%8F%82%E6%95%B0.html

今天主要是关于一些图层的添加，在这里只尝试添加交通图层，更多图层请到高德api官方文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 900px;
            height: 900px;
        }
    </style>
</head>
<body>
<button onclick="add_traffic()">显示实时路况</button>
<button onclick="hide_traffic()">隐藏实时路况</button>
<div id="container">

</div>

<script>
    window._AMapSecurityConfig={
    securityJsCode: '5457423e5abb27ad53e22ca37bd02c5d'
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=2ab6693026920bfdfcc64a96e81df848"></script>
<script>
    const map=new AMap.Map("container",{
        center: [104,30],//设置地图中心点经度与纬度
        zoom: 5,//地图的缩放比例(3~20)
        viewMode: '3D',//默认俯视角度
        pitch: 45 //倾斜角度
    });
    var traffic = new AMap.TileLayer.Traffic({
        autoRefresh: true, //自动刷新
        interval: 180,//刷新间隔
    })//交通路况图层
    function add_traffic(){
        map.add(traffic)
    }
    function hide_traffic(){
        map.remove(traffic)
    }
</script>
</body>
</html>