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>