百度地圖上Marker下的波紋實現

時間 2019-11-12
標籤百度地圖 marker 波紋實現简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>地圖上Marker的波紋</title>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密匙"></script>
        <style type="text/css">
            html, body, #allmap {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            
            .wave-wapper {
                position: absolute; 
                top: 0; 
                left: 0;
                z-index: -7982821;
            }
            
            .item {
                position: absolute;
                color: inherit;
                background-color: blue;
                border-radius: 50%;
                border: 1px solid blue;
            }
            
            .item1 {
                width: 25px;
                height: 10px;
                left: 12px;
                top: 19px;
                -webkit-animation: wave 2s infinite ease-in;
                animation: wave 2s infinite ease-in;
                -webkit-animation-delay: 0s; 
                animation-delay: 0s;
                mask: radial-gradient(transparent 30%, #000 30%);
                -webkit-mask: radial-gradient(transparent 30%, #000 30%);
            }
            
            .item2 {
                width: 54px;
                height: 25px;
                left: -3px;
                top: 12px;
                -webkit-animation: wave 2s infinite ease-in;
                animation: wave 2s infinite ease-in;
                -webkit-animation-delay: 0s;
                animation-delay: 0s;
                opacity: 0;
                mask: radial-gradient(transparent 55%, #000 55%);
                -webkit-mask: radial-gradient(transparent 48%, #000 48%);
            }
            
            @-webkit-keyframes wave {
                from {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    opacity: 1;
                }
                to {
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    opacity: 0;
                }
            }
            
            @keyframes wave {
                from {
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    opacity: 1;
                }
                to {
                    -webkit-transform: scale(1);
                    transform: scale(1);
                    opacity: 0;
                }
            }
            
        </style>
    </head>

    <body>
        <div id="allmap" style="height: 80%;"></div>
        <button onclick="removeMarkers()">移除marker</button>
        <button onclick="displayWaveList(true)">顯示全部波紋</button>
        <button onclick="displayWaveList(false)">隱藏全部波紋</button>

        <script type="text/javascript">
            // 百度地圖API功能
            var mp = new BMap.Map("allmap");
            var waveList = [];
            var markerList = [];
            
            mp.centerAndZoom(new BMap.Point(116.3964, 39.9093), 15);
            mp.enableScrollWheelZoom();
            
            //地圖點擊事件
            mp.addEventListener("click", function(e) {
                var marker = new BMap.Marker(e.point),
                    waveItem;
                mp.addOverlay(marker);
                markerList.push(marker);
                
                for(var i = 0, len = waveList.length; i < len; i++){
                    if(!waveList[i].hasMarker){
                        waveItem = waveList[i];
                        break;
                    }
                }
                if(!waveItem){
                    waveItem = addWaveToMarker(mp);
                }
                
                marker.waveItem = waveItem;
                //綁定標記
                waveItem.hasMarker = true;
                
                //鼠標懸浮在marker上的監聽
                marker.addEventListener("mouseover", function(e) {
                    displaySingleWave(this, true);
                });
                //鼠標移出marker的監聽
                marker.addEventListener("mouseout", function(e) {
                    displaySingleWave(this, false);
                });
                
                //marker移除監聽
                marker.addEventListener('remove',function(e){
                    //移除marker是波紋對象綁定標記置爲false
                    if(this.waveItem){
                        this.waveItem.hasMarker = false;
                        this.waveItem.style.display = 'none';
                    }
                })
            });
            //爲地圖添加波紋dom
            function addWaveToMarker(mp){
                var waveWapper = document.createElement('div'),
                    waveChild1 = document.createElement('div'),
                    waveChild2 = document.createElement('div');
                
                waveWapper.classList = 'wave-wapper';
                waveChild1.classList = 'item item1';
                waveChild2.classList = 'item item2';
                waveWapper.appendChild(waveChild1);
                waveWapper.appendChild(waveChild2);
                
                mp.getPanes().markerPane.appendChild(waveWapper);
                waveList.push(waveWapper);
                
                return waveWapper;
            }
            
            //移除全部marker
            function removeMarkers(){
                for(var i = 0, len = markerList.length; i < len; i++){
                    mp.removeOverlay(markerList[i]);
                }
                markerList = [];
            }
            //顯示全部波紋
            function displayWaveList(isShow){
                for(var i = 0, len = markerList.length; i < len; i++){
                    displaySingleWave(markerList[i], isShow ? true : false)
                }
            }
            //顯隱波紋
            function displaySingleWave(marker, isShow){
                var cssValue = isShow ? 'block' : 'none';
                if(marker && marker.waveItem){
                    if(isShow){
                        var pixel = mp.pointToOverlayPixel(marker.point);
                        marker.waveItem.style.left = pixel.x - 26 + "px";
                        marker.waveItem.style.top = pixel.y - 25 + "px";
                    }
                    marker.waveItem.style.display = cssValue;
                }
            }
        </script>
    </body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。