为标注点 添加椭圆 css 水波 扩散 动画效果 完整代码!DOCTYPE htmlhtmlhead meta charset=utf-8 title百度地图多点标注示例title script type=textjavascript src=httpapimapbaiducomapiv=30&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGiscript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度地图多点标注示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
    <script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
    <style type="text/css">
        #map {
			position: absolute;
            width: 100%;
            height: 100%;
        }
        .marker-animation {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(0, 123, 255, 0.3);
            pointer-events: none;
            animation: marker-animation 1.5s linear infinite;
        }
        .marker-animation::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0, 123, 255, 0.6);
            pointer-events: none;
            animation: ripple-animation 1.5s linear infinite;
        }
        @keyframes marker-animation {
            0% {
                transform: scale(1);
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                transform: scale(2);
                opacity: 0;
            }
            75% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
        @keyframes ripple-animation {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            25% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.6;
            }
            75% {
                opacity: 0.3;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
       var map = new BMap.Map("map");
	   map.setMapStyle({
	   	style: 'midnight'
	   });
       var point = new BMap.Point(108.34138, 22.819153); // 设置中心点坐标
       map.centerAndZoom(point, 16); // 设置地图级别
<pre><code>   // 添加多个点标注
   var markers = [
       { point: new BMap.Point(108.361812, 22.819742), content: &quot;这是第一个点&quot; },
       { point: new BMap.Point(108.341304, 22.819313), content: &quot;这是第二个点&quot; },
       { point: new BMap.Point(108.328287, 22.824908), content: &quot;这是第三个点&quot; }
   ];
   
   for (var i = 0; i &lt; markers.length; i++) {
       var marker = new BMap.Marker(markers[i].point);
       map.addOverlay(marker);
       
       // 添加动画效果
       var animation = document.createElement('div');
       animation.className = 'marker-animation';
       marker.getPanes().labelPane.appendChild(animation);
       
       // 添加infoBox信息窗
       var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
           boxStyle: {
              width: &quot;200px&quot;,
              height: &quot;100px&quot;,
              border: &quot;1px solid #ccc&quot;,
              borderRadius: &quot;5px&quot;,
              backgroundColor: &quot;#000&quot;,
              padding: &quot;10px&quot;,
              fontSize: &quot;14px&quot;,
              lineHeight: &quot;20px&quot;,
              color: &quot;#fff&quot;,
           },
           closeIconMargin: &quot;10px 2px 0 0&quot;,
           enableAutoPan: true,
           align: INFOBOX_AT_TOP
       });
   
       marker.addEventListener(&quot;click&quot;, function () {
           infoBox.open(this);
       });
   }
   
   // 启用滚轮缩放
   map.enableScrollWheelZoom(true);
	
&lt;/script&gt;
</code></pre>
</body>
</html

为标注点 添加椭圆 css 水波 扩散 动画效果 完整代码!DOCTYPE htmlhtmlhead meta charset=utf-8 title百度地图多点标注示例title script type=textjavascript src=httpapimapbaiducomapiv=30&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGiscript

为标注点添加椭圆 css 水波扩散动画效果完整代码!DOCTYPE htmlhtmlhead meta charset=utf-8 title百度地图多点标注示例title script type=textjavascript src=httpapimapbaiducomapiv=30&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGiscript