02. 高德地圖新增多一個圖層
阿新 • • 發佈：2021-12-13
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>