百度地图坐标增强现实（雷达效果）附全国离线地图

拼搏现实的明天。 2022-10-14 00:41 344阅读 0赞

效果图：

![20210604153724742.gif][]

![20210604153809311.gif][]

完整源码下载（0积分）：[CSDN完整源码下载地址][CSDN]

### 代码简单不做过多解释 ###

<!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;
    
    
    }

[20210604153724742.gif]: /images/20221014/b2e766d6bcb3487596d0b34064c7e1b7.png
[20210604153809311.gif]: /images/20221014/fd0e51b534f6499b8695f7d270825edc.png
[CSDN]: https://download.csdn.net/download/weixin_40195422/19388179