js实现百度地图的自定义marker与css3动画的交互

// 首先，确保你已经在页面中引入了BMap API和CSS样式
 
// 初始化地图和marker
function initMap() {
    var map = new BMap.Map("mapContainer"); // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
 
    // 创建自定义marker
    var marker = new BMap.Marker(point);
    map.addOverlay(marker); // 将标注添加到地图中
 
    // 绑定鼠标事件
    marker.addEventListener("mouseover", function() {
        this.setTop(true); // 将标注置顶
        openInfo(this); // 打开信息窗口
    });
 
    marker.addEventListener("mouseout", function() {
        this.setTop(false); // 取消置顶
        closeInfo(this); // 关闭信息窗口
    });
}
 
// 打开信息窗口
function openInfo(marker) {
    var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: "自定义标题" // 信息窗口标题
    };
 
    // 创建信息窗口
    var infoWindow = new BMap.InfoWindow("这里是自定义内容", opts);
    marker.openInfoWindow(infoWindow); // 打开信息窗口
}
 
// 关闭信息窗口
function closeInfo(marker) {
    marker.closeInfoWindow(); // 关闭信息窗口
}
 
// 页面加载完成后初始化地图
window.onload = initMap;

这段代码展示了如何在百度地图上创建一个自定义的marker，并且通过CSS3动画与marker进行交互。当鼠标悬停在marker上时，会打开一个信息窗口，当鼠标离开时，会关闭信息窗口。这个例子简单明了地展示了如何使用百度地图API进行开发。