高德地图进阶开发实战案例(9):涟漪动画标注的实现方案

涟漪动画CSS样式

.alert1 {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #ff0000;
            margin: auto 5px;
            -webkit-animation: animation1 1s infinite;
        }

        .alert2 {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #00e921;
            margin: auto 5px;
            -webkit-animation: animation2 1s infinite;
        }

        /*高德地图标注动画*/
        @keyframes animation1 {
            0% {
                -moz-box-shadow: 0px 0px 10px 5px #ff0000;
                box-shadow: 0px 0px 10px 5px #ff0000;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 5px #ff0000;
                box-shadow: 0px 0px 20px 5px #ff0000;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 5px #ff0000;
                box-shadow: 0px 0px 10px 5px #ff0000;
            }
            150% {
                -moz-box-shadow: 0px 0px 50px 5px #ff0000;
                box-shadow: 0px 0px 50px 5px #ff0000;
            }
        }

        @keyframes animation2 {
            0% {
                -moz-box-shadow: 0px 0px 10px 5px #00e921;
                box-shadow: 0px 0px 10px 5px #00e921;
            }
            50% {
                -moz-box-shadow: 0px 0px 20px 5px #00e921;
                box-shadow: 0px 0px 20px 5px #00e921;
            }
            100% {
                -moz-box-shadow: 0px 0px 10px 5px #00e921;
                box-shadow: 0px 0px 10px 5px #00e921;
            }
            150% {
                -moz-box-shadow: 0px 0px 50px 5px #00e921;
                box-shadow: 0px 0px 50px 5px #00e921;
            }
        }

创建地图

var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 17,
        center: [121.611511, 29.914939]
    });

创建标注覆盖物

var marker1 = new AMap.Marker({
        //icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [121.611554, 29.914888],
        draggable: true,
        content: '<span class="alert1"></span>',
        animation: 'AMAP_ANIMATION_DROP'
    });

    // 构造点标记
    var marker2 = new AMap.Marker({
        //icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [121.611409,29.916046],
        draggable: true,
        content: '<span class="alert2"></span>',
        animation: 'AMAP_ANIMATION_DROP'
    });

    map.add([marker1, marker2]);

    //鼠标点击marker弹出自定义的信息窗体
    marker1.on('click', openInfo);
    marker2.on('click', openInfo);

信息窗体

//在指定位置打开信息窗体
    function openInfo() {
        //构建信息窗体中显示的内容
        var info = [];
        info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
        info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>漏刻有时地图可视化</h4>");
        info.push("<p class='input-item'>地址:漏刻有时地图可视化</p></div></div>");

        infoWindow = new AMap.InfoWindow({
            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
        });

        infoWindow.open(map, map.getCenter());
    }

lockdatav Done!