百度地图坐标增强现实（雷达效果）附全国离线地图_百度地图 bmap.circle 覆盖物雷达扫描动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40195422/article/details/117563261

效果图：

代码简单不做过多解释

<!DOCTYPE html>
<html>
<head>
<title>百度地图demo 最大比例尺 1:1014769</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script src="complexCustomOverlay.js"></script>
<link rel="stylesheet" type="text/css" href="complexCustomOverlay.css" />
<style type="text/css">
	 .anchorBL {
            display: none;
        }
</style>
</head>
<body>
<div id="map" style="width:1000px;height:500px"></div>
<script type="text/javascript">
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 3, maxZoom: 9});
var map = new BMap.Map('map', {mapType: MyMap});
map.addControl(new BMap.NavigationControl());
//杭州
var newPoint=new BMap.Point(120.12569651390078, 30.277330738403123);
map.centerAndZoom(newPoint, 9);


var marker = new BMap.Marker(newPoint, {icon: new BMap.Icon("cat48x48.ico", new BMap.Size(48, 48))});
    map.centerAndZoom(newPoint, 9);
    map.addOverlay(new ComplexCustomOverlay(newPoint, marker));
	map.addControl(new BMap.NavigationControl(
	        {
	            type: BMAP_NAVIGATION_CONTROL_ZOOM,
	            anchor: BMAP_ANCHOR_TOP_RIGHT,
	            offset: new BMap.Size(30, 30),
	        }
	    ));
	map.enableScrollWheelZoom(); 
</script>
</body>
</html>

.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);  
        }  
    }

//重塑marker
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;


}