百度地图点闪烁效果实现

谁践踏了优雅 2024-04-17 20:15 75阅读 0赞

**效果图：**

![20190831124305728.jpg][]![20190831124318362.jpg][]

**完整代码，放到html文件直接运行即可：**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html {
                width: 100%;
                height: 100%;
                margin: 0;
                font-family: "微软雅黑";
            }
    
            #allmap {
                height: 500px;
                width: 100%;
            }
    
            #r-result {
                width: 100%;
            }
    
            @keyframes scale {
                0% {
                    transform: scale(0);
    				background:#ff0000;
                }
    			10% {
                    transform: scale(0.1);
    				background:#ff1d1d;
                }
    			20% {
                    transform: scale(0.2);
    				background:#ff3939;
                }
    			30% {
                    transform: scale(0.3);
    				background:#ff5e5e
                }
    			40% {
                    transform: scale(0.4);
    				background:#ff7d7d;
                }
                50% {
                    transform: scale(0.5);
    				background:#ff9c9c;
                }
    			60% {
                    transform: scale(0.6);
    				background:#ffb3b3;
                }
                70% {
    				transform: scale(0.7);
    				background:#ffcece;
    			}
    			80% {
                    transform: scale(0.8);
    				background:#ffeeee;
                }
    			100% {
                    transform: scale(0.9);
    				background:#fff2f2;
                }
            }
    		
    		@keyframes scale1 {
                0% {
                    transform: scale(0);
    				background:#ff0000;
                }
    			10% {
                    transform: scale(0.1);
    				background:#ff1d1d;
                }
    			20% {
                    transform: scale(0.2);
    				background:#ff3939;
                }
    			30% {
                    transform: scale(0.3);
    				background:#ff5e5e
                }
    			40% {
                    transform: scale(0.4);
    				background:#ff7d7d;
                }
                50% {
                    transform: scale(0.5);
    				background:#ff9c9c;
                }
    			60% {
                    transform: scale(0.6);
    				background:#ffb3b3;
                }
                70% {
    				transform: scale(0.7);
    				background:#ffcece;
    			}
    			80% {
                    transform: scale(0.8);
    				background:#ffeeee;
                }
    			100% {
                    transform: scale(0.9);
    				background:#fff2f2;
                }
            }
    
            .classScale {
                animation: scale 2s linear infinite normal;
            }
    		.classScale1 {
    			animation: scale1 2s 1s linear infinite normal;
            }
        </style>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=qUKBm0MPk3yTcmCeIjz7xDjOkwoqrvKI"></script>
        <title>点闪烁</title>
    </head>
    
    <body>
        <div id="allmap"></div>
    	<script type="text/javascript">
    		window.onload=function(){
    			// 百度地图API功能
    			map = new BMap.Map("allmap");
    			var point = new BMap.Point(116.404, 39.915);
    			map.centerAndZoom(point, 15);
    
    			const option = {
    				position: point,
    				offset: new BMap.Size(-50, -50),
    			};
    
    			const valueLabel = new BMap.Label(
    				"<div class='classScale' : ''} style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div class='classScale1' : ''} style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>",
    				option);
    			valueLabel.setStyle({
    				border: 'none',
    				backgroundColor: 'RGBA(0,0,0,0)',
    			});
    			map.addOverlay(valueLabel);
    		} 
    </script>
    </body>
    </html>

[20190831124305728.jpg]: https://img-blog.csdnimg.cn/20190831124305728.jpg
[20190831124318362.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fc3b09017e6145209b6cacfecc34e701.jpg