02. 高德地图添加多一个图层 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>02高德地图添加多一个图层</title>
 6         <style type="text/css">
 7             html,
 8             body {
 9                 height: 100%;
10             }
11             
12             .btn {
13                 position: absolute;
14                 right: 10px;
15                 bottom: 30px;
16             }
17 
18             #container {
19                 width: 100%;
20                 height: 100%;
21             }
22         </style>
23     </head>
24     <body>
25         <div id="container"></div>
26         <button class="btn">显示/隐藏实时路况
27             <script src="https://webapi.amap.com/loader.js"></script>
28             <!-- <script src = 'https://webapi.amap.com/maps?v=2.0&key=d1af82a320704e42f2df72fd31672839' type="text/javascript" > </script> -->
29             <script type="text/javascript">
30                 // AMapLoader.load 用于加载使用的
31                 AMapLoader.load({
32                     "key": "d1af82a320704e42f2df72fd31672839", // 申请好的Web端开发者Key，首次调用 load 时必填
33                     "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
34                     "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
35                     "AMapUI": { // 是否加载 AMapUI，缺省不加载
36                         "version": '1.1', // AMapUI 缺省 1.1
37                         "plugins": ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
38                     },
39                     "Loca": { // 是否加载 Loca， 缺省不加载
40                         "version": '1.3.2' // Loca 版本，缺省 1.3.2
41                     },
42                 }).then((AMap) => {
43                     const map = new AMap.Map('container', {
44                         zoom: 12, // 初始化地图层级，所谓的层级就是数值越大，离地球越近
45                         center: [116.397428, 39.90923] //初始化地图中心点
46                     });
47 
48                     // 实时路况图层
49                     const trafficLayer = new AMap.TileLayer.Traffic({
50                         zIndex: 10, // 这个是什么意思？
51                         zooms: [7, 22], // 地图缩放的范围
52                     });
53 
54                     // trafficLayer.setMap(map); // 这个似乎也是添加图层到地图中，但是感觉不同
55                     map.add(trafficLayer) //添加图层到地图
56 
57                     const btnEle = document.querySelector('.btn')
58                     btnEle.addEventListener('click', toggle)
59                     var isVisible = true;
60 
61                     function toggle() {
62                         if (isVisible) {
63                             trafficLayer.hide();
64                             isVisible = false;
65                         } else {
66                             trafficLayer.show();
67                             isVisible = true;
68                         }
69                     }
70 
71                 }).catch((e) => {
72                     console.error(e); //加载错误提示
73                 });
74             </script>
75     </body>
76 </html>

 

posted @ 2021-12-13 12:04  sky-su  阅读(728)  评论(0)    收藏  举报