mapbox-gl通过为marker设置css动画，实现动态闪烁效果，先放个效果图 。
1.主要就是为元素设置一个动画，
myfirst动画让元素随时间放大
1 .marker { 2 /* background: url("./image/loc.png"); */ 3 background-position: center center; 4 width:20px; 5 height:20px; 6 display: flex; 7 display: -webkit-flex; 8 align-items: center; 9 justify-content: center; 10 } 11 .marker p{ 12 background-color: rgba(250, 0, 0, 0.2); 13 width: 10px; 14 height: 10px; 15 border-radius:50%; 16 animation: myfirst 1.5s infinite; 17 box-shadow: 0px 0px 2px #f00; 18 } 19 @keyframes myfirst{ 20 10% {transform: scale(1.2);} 21 20% {transform: scale(2);} 22 40% {transform: scale(3);} 23 60% {transform: scale(4);} 24 80% {transform: scale(6);} 25 100% {transform: scale(8);} 26 }
2.创建一个marker，其元素应用上述样式即可
完整代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5 <title>Add custom icons with Markers</title> 6 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 7 <script src="style/MapStyle.js"></script> 8 <script src="style/dynamic-traffic-info.js"></script> 9 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script> 10 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' /> 11 <style> 12 body { margin:0; padding:0; } 13 #map { position:absolute; top:0; bottom:0; 100%; } 14 *{ 15 margin: 0; 16 padding: 0; 17 } 18 .dd{ 19 height: 50px; 20 background-color: #aaa; 21 } 22 .marker { 23 /* background: url("./image/loc.png"); */ 24 background-position: center center; 25 20px; 26 height:20px; 27 display: flex; 28 display: -webkit-flex; 29 align-items: center; 30 justify-content: center; 31 } 32 .marker p{ 33 background-color: rgba(250, 0, 0, 0.2); 34 10px; 35 height: 10px; 36 border-radius:50%; 37 animation: myfirst 1.5s infinite; 38 box-shadow: 0px 0px 2px #f00; 39 } 40 @keyframes myfirst{ 41 10% {transform: scale(1.2);} 42 20% {transform: scale(2);} 43 40% {transform: scale(3);} 44 60% {transform: scale(4);} 45 80% {transform: scale(6);} 46 100% {transform: scale(8);} 47 } 48 </style> 49 </head> 50 <body> 51 <div id='map'></div> 52 <script> 53 mapboxgl.accessToken = 'pk.eyJ1IjoibHhxanNzIiwiYSI6ImNqY3NkanRjajB1MWwzM3MwcnA0dDJrYngifQ.ApTVfmm2zBM_kF22DvtowQ'; 54 var map = new mapboxgl.Map({ 55 container: 'map', 56 // // style: getTrafficStyle(), 57 // style: 'mapbox://styles/mapbox/navigation-preview-day-v2', 58 style: 'mapbox://styles/mapbox/light-v10', 59 center: [116.270169, 40.087127], 60 zoom: 4 61 }); 62 map.on('click', function(event){ 63 let lng = event.lngLat.lng.toFixed(6) 64 let lat = event.lngLat.lat.toFixed(6) 65 let zoom = map.getZoom() 66 console.log('Clicked at : ' + lng + ', ' + lat + '. Zoom: ' + zoom) 67 // var style = map.getStyle(); 68 // console.info(JSON.stringify(style)); 69 }); 70 71 var geojson = { 72 "type": "FeatureCollection", 73 "features": [ 74 { 75 "type": "Feature", 76 "geometry": { 77 "type": "Point", 78 "coordinates": [ 79 120.1904296875, 80 30.391830328088137 81 ] 82 } 83 }, 84 { 85 "type": "Feature", 86 "geometry": { 87 "type": "Point", 88 "coordinates": [ 89 121.44287109374999, 90 31.16580958786196 91 ] 92 } 93 }, 94 { 95 "type": "Feature", 96 "geometry": { 97 "type": "Point", 98 "coordinates": [ 99 118.828125, 100 32.18491105051798 101 ] 102 } 103 }, 104 { 105 "type": "Feature", 106 "geometry": { 107 "type": "Point", 108 "coordinates": [ 109 117.11975097656249, 110 31.812229022640704 111 ] 112 } 113 }, 114 { 115 "type": "Feature", 116 "geometry": { 117 "type": "Point", 118 "coordinates": [ 119 116.45507812500001, 120 40.07807142745009 121 ] 122 } 123 }, 124 { 125 "type": "Feature", 126 "geometry": { 127 "type": "Point", 128 "coordinates": [ 129 113.35693359375, 130 23.160563309048314 131 ] 132 } 133 } 134 ] 135 }; 136 137 geojson.features.forEach(function(marker) { 138 var el = document.createElement('div'); 139 el.className = 'marker'; 140 141 var el1 = document.createElement('p'); 142 el.appendChild(el1); 143 var el2 = document.createElement('span'); 144 el1.appendChild(el2); 145 146 new mapboxgl.Marker(el) 147 .setLngLat(marker.geometry.coordinates) 148 .addTo(map); 149 }); 150 </script> 151 152 </body> 153 </html>