百度地圖擴充套件動畫maker

阿新 • • 發佈：2020-07-29

1、擴充套件css3

   .css_animation{  
        height:50px;  
        width:50px;  
        border-radius: 25px;  
        background: rgba(250, 0, 0, 0.9);  
        transform: scale(0);  
        animation: myfirst 3s;  
        animation-iteration-count: infinite;  
    }  
  
    @keyframes myfirst{  
        to{  
            transform 
: scale(2);  
            background: rgba(0, 0, 0, 0);  
        }  
    }

2、擴充套件js，提供渲染css3和maker的方法，ComplexCustomOverlay.js

function ComplexCustomOverlay(point , marker){
     
        this._point = point;
        this._marker = marker;
    
    }
 
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize  
= function(map){
        this._map = map;
        var div = this._div = document.createElement("div");
        div.style.position = "absolute";  
        var arrow = this._arrow = document.createElement("div");
   
        arrow.style.position = "absolute"; 
        arrow.style.overflow = "hidden";
        div.appendChild(arrow);
        arrow.className 
="css_animation";  
    
         if(this._marker ){
            map.addOverlay(this._marker );
        } 

        map.getPanes().labelPane.appendChild(div);
    
        return div;
    }
    ComplexCustomOverlay.prototype.draw = function(){
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 25 + "px";
        this._div.style.top  = pixel.y - 25 + "px";
         
        
    }
    
    ComplexCustomOverlay.prototype.setPosition = function(point) {
        this._point = point ;
        this.draw();
        if(this._marker)
            this._marker.setPosition(this._point);
          
    }
    
    ComplexCustomOverlay.prototype.getPosition = function() {
        return this._point ;
         
          
    }

3、呼叫測試

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3_MARKER測試</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
 <script type="text/javascript" src="ComplexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="ComplexCustomOverlay.css">
 
 
<style type="text/css">
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
 
body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
 
.map {
    width: 100%;
    height: 100%;
    background: #d5e6f5;
    position: absolute;
    float: left;
}
</style>
 
</head>
<body>
     
    <div id="map" class="map"> </div>
           
    <script type="text/javascript">
        
    
        var map;
 
        window.onload = function() {
 
            map = new BMap.Map('map'); // 建立Map例項
 
            map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
 
            var point = new BMap.Point(120, 30);//, 11
            map.centerAndZoom(point, 9);
 
            //三個marker
            var m1 = addMarker(120, 30);
            map.addOverlay(m1);
 
        };
 
        function addMarker(_lon, _lat) {
            var point = new BMap.Point(_lon, _lat);
 
            var size = new BMap.Size(48, 48);
 
            var marker = new BMap.Marker(point); // 建立標註    
            var plex = new ComplexCustomOverlay(point, marker); // 建立標註    
 
            return plex;
 
        }
    </script>
 
</body>
</html>