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

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

一：调用 百度 地图的api

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .map {
            width: 100%;
            height: 100%;
            background: #d5e6f5;
            position: absolute;
            float: left;
        }
    </style>
</head>

<body>
    <div id="map" class="map"> </div>
    <!-- 调用百度地图api -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&amp;type=webgl&amp;ak=密钥"></script>
</body>
</html>

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

   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这个方法并且进行调试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
        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;
        }
       .css_animation {
            width: 100%;
            height: 100%;
            position: relative;
            transform: rotate(0deg);
            animation: loading 1s infinite linear;
        }

        @keyframes loading {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>

<body>
    <div id="map" class="map"> </div>
    <!-- 百度地图 -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=nAIeW1EIq781ztGikNl17GqArQzAgtqz"></script>
    <script>
 
        window.onload = function () {
            map = new BMapGL.Map('map'); // 创建Map实例  
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放  
            var point = new BMapGL.Point(120, 30);//, 11  
            map.centerAndZoom(point, 9);
          
            var m1 = addMarker(120, 30);
            map.addOverlay(m1);

        };

        function addMarker(_lon, _lat) {
            var myIcon = new BMapGL.Icon("./12.png", new BMapGL.Size(22, 32));
            var point = new BMapGL.Point(_lon, _lat);
            var marker = new BMapGL.Marker(point, {
                icon: myIcon
            });
            map.addOverlay(marker); // 增加点
            var size = new BMapGL.Size(48, 48);
            var plex = new ComplexCustomOverlay(point, marker); // 创建标注      
            return plex;

        }


    </script>
</body>

</html>