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

要为标注点添加椭圆、CSS水波扩散动画效果，可以使用CSS样式和JavaScript动画来实现。

首先，在CSS样式中添加椭圆和水波扩散动画效果的样式：

.marker {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #f00;
    border-radius: 50%;
    animation: waterWave 2s infinite ease-in-out;
}

@keyframes waterWave {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

然后，在JavaScript中将标注点的图标设置为椭圆样式，并为标注点添加点击事件：

// 添加多个点标注
var markers = [
    { point: new BMap.Point(108.361812, 22.819742), content: "这是第一个点" },
    { point: new BMap.Point(108.341304, 22.819313), content: "这是第二个点" },
    { point: new BMap.Point(108.328287, 22.824908), content: "这是第三个点" }
];

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

    // 添加infoBox信息窗
    var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
        boxStyle: {
            width: "200px",
            height: "100px",
            border: "1px solid #ccc",
            borderRadius: "5px",
            backgroundColor: "#000",
            padding: "10px",
            fontSize: "14px",
            lineHeight: "20px",
            color: "#fff",
        },
        closeIconMargin: "10px 2px 0 0",
        enableAutoPan: true,
        align: INFOBOX_AT_TOP
    });

    marker.addEventListener("click", function () {
        infoBox.open(this);
    });
}

// 创建自定义的标注点图标
function createMarkerIcon() {
    var icon = new BMap.Icon("", new BMap.Size(30, 30));
    var div = document.createElement("div");
    div.className = "marker";
    icon.setImage(divToDataURL(div));
    return icon;
}

// 将div转换为DataURL
function divToDataURL(div) {
    var canvas = document.createElement("canvas");
    canvas.width = div.offsetWidth;
    canvas.height = div.offsetHeight;
    var context = canvas.getContext("2d");
    context.drawImage(div, 0, 0);
    return canvas.toDataURL();
}

最后，在HTML中引入CSS和JavaScript文件，将以上代码放入<script>标签中即可。

注意：以上代码只是示例，实际效果可能需要根据需求进行调整和修改