百度地图扩展动画maker

yongquanx

2017-09-12

最近开始使用百度地图，需要在标记上添加一些闪烁的动画来做一些高亮或者明显提示给客户，因此基于css3来处理动画效果，用maker来处理标记，以下是简单记录。

1、扩展css3

测试css3代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3测试</title>
 
<style type="text/css">
	html{
		height: 100%;
		width: 100%;
		overflow: hidden;
		
	}
  
   .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);  
        }  
    }  
</style>

</head>
<body>
	 <div id="c_test" class="css_animation"> </div>
		 
</body>
</html>

实际效果：

百度地图扩展动画maker

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=39b5eb8bb91adccfa6487135d960a1e8"></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>

实际效果：

百度地图扩展动画maker

4、添加复杂效果，提供和其他maker的连线并动态移动：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS_MARKER2测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=39b5eb8bb91adccfa6487135d960a1e8"></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;
		var index = 0;

		var add = 0.01;

		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);
			var m2 = addMarker(121, 30);
			var m3 = addMarker(120, 31);

			//无人机
			var m4 = addMarker(121, 31);
			

			map.addOverlay(m1);   
			map.addOverlay(m2);  
			map.addOverlay(m3);  
			map.addOverlay(m4);  

			var l1 = new BMap.Polyline([ new BMap.Point(120, 30),
					new BMap.Point(121, 31) ], {
				strokeColor : "blue",
				strokeWeight : 3,
				strokeOpacity : 0.8
			}); //创建折线
			var l2 = new BMap.Polyline([ new BMap.Point(121, 30),
					new BMap.Point(121, 31) ], {
				strokeColor : "blue",
				strokeWeight : 3,
				strokeOpacity : 0.8
			}); //创建折线
			var l3 = new BMap.Polyline([ new BMap.Point(120, 31),
					new BMap.Point(121, 31) ], {
				strokeColor : "blue",
				strokeWeight : 3,
				strokeOpacity : 0.8
			}); //创建折线
			map.addOverlay(l1); //增加折线
			map.addOverlay(l2); //增加折线 
			map.addOverlay(l3); //增加折线

			setInterval(function() {

				index = index + 1;

				var old_p = m4.getPosition();

				var lon = old_p.lng - add;
				var lat = old_p.lat - add;

				if (Math.abs(index) > 100) {
					add = add * -1;
					index = 0;
				}

				//修改线和位置
				var p = new BMap.Point(lon, lat);

				l1.setPositionAt(1, p);

				l2.setPositionAt(1, p);
				l3.setPositionAt(1, p);

				m4.setPosition(p);

			}, 100);

		};

		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>

实际效果：

百度地图扩展动画maker