js实现百度地图的自定义marker与css3动画的交互

使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，

一：调用百度地图的api

二：初始化百度地图创建实例

   var map = new BMapGL.Map("map");          // 创建地图实例 
        console.log("map-----", map);
        var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // 创建图标
        var myIcon = new BMapGL.Icon("./111.png", new BMapGL.Size(32, 32));
        // 创建Marker标注，使用图标
        var pt = new BMapGL.Point(116.404, 39.912);
        var marker = new BMapGL.Marker(pt, {
            icon: myIcon
        });
        map.addOverlay(marker); // 增加点

以上代码是为了调用百度地图api以及初始化创建实例 ，为以下提供测试需要。

效果图展示

效果原图

三：封装一个方法，用来提供渲染css3和maker的方法，

function ComplexCustomOverlay(point, marker) {
            console.log("this-----", this)

            this._point = point;
            this._marker = marker;
        }

        //以下都是在ComplexCustomOverlay这个原型下添加属性和方法的，
        // 覆盖物
        ComplexCustomOverlay.prototype = new BMapGL.Overlay();

        // 初始化
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            // 创建一个div
            var div = this._div = document.createElement("div");
            console.log("div------", div);
            //父级div样式
            div.style.width = "40px";
            div.style.height = "40px";
            div.style.marginLeft = "5px";
            div.style.marginTop = "24px"
            div.style.transform = "rotateX(110deg)"
            div.style.position = "absolute";

            // 创建一个img
            var arrow = this._arrow = document.createElement("img");
            arrow.src = "./111.png"
            console.log("arrow------", arrow);
            arrow.style.position = "relative";
            arrow.style.overflow = "hidden";
            // 让arrow这个div成为div这个div的子元素   
            div.appendChild(arrow);
            arrow.className = "css_animation";

            // 有marker的话 添加覆盖点
            if (this._marker) {
                map.addOverlay(this._marker);
            }
            // 在窗格中加入div这个dom元素
            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;
        }

四：进行调用ComplexCustomOverlay这个方法并且进行调试

完结：要是在测试中有问题的可以私信我的哦