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

为标注点添加椭圆、水波扩散动画效果需要借助CSS和JavaScript来实现。

首先，在地图上添加椭圆需要修改代码如下：

<style type="text/css">
    .circle {
        position: absolute;
        width: 100px;
        height: 50px;
        border: 2px solid red;
        border-radius: 50%;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.4);
            opacity: 0.5;
        }
        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }
</style>

for (var i = 0; i < markers.length; i++) {
    var marker = new BMap.Marker(markers[i].point);
    map.addOverlay(marker);

    // 添加椭圆
    var circle = document.createElement('div');
    circle.className = 'circle';
    marker.getPanes().labelPane.appendChild(circle);

    // 设置椭圆位置
    var position = map.pointToOverlayPixel(marker.getPosition());
    circle.style.left = position.x - 50 + 'px';
    circle.style.top = position.y - 25 + 'px';
}

然后，为标注点添加水波扩散动画效果需要修改代码如下：

<style type="text/css">
    .ripple {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 2px solid blue;
        border-radius: 50%;
        opacity: 0.5;
        animation: ripple 2s infinite;
    }

    @keyframes ripple {
        0% {
            transform: scale(0.4);
            opacity: 0.5;
        }
        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }
</style>

for (var i = 0; i < markers.length; i++) {
    var marker = new BMap.Marker(markers[i].point);
    map.addOverlay(marker);

    // 添加水波
    var ripple = document.createElement('div');
    ripple.className = 'ripple';
    marker.getPanes().labelPane.appendChild(ripple);

    // 设置水波位置
    var position = map.pointToOverlayPixel(marker.getPosition());
    ripple.style.left = position.x - 50 + 'px';
    ripple.style.top = position.y - 50 + 'px';
}

通过以上代码修改后，即可为标注点添加椭圆和水波扩散动画效果