百度地图自定义标记打点

initMap(){
            const that = this
            this.bmap = new BMapGL.Map('container', {
                minZoom: 10
            }) // 创建地图实例
            let pointcenter = new BMapGL.Point(122.303872,29.950851) // 创建点坐标
            this.bmap.enableScrollWheelZoom(true)
            this.bmap.centerAndZoom(pointcenter, 18) // 初始化地图，设置中心点坐标和地图级别
            this.bmap.setTilt(10) // 设置地图的倾斜角度
            this.bmap.setMapStyleV2({//自定义地图样式
                styleId: '*************'
            })
            let point = new BMapGL.Point(122.303872,29.950851)

            // 定义自定义覆盖物的构造函数
            function SquareOverlay(center, color1, color2,data){
                this._center = center;
                this._color1 = color1;
                this._color2 = color2;
                this.data = data;
            }
            // 继承API的BMap.Overlay
            SquareOverlay.prototype = new BMapGL.Overlay();
            // 实现初始化方法
            SquareOverlay.prototype.initialize = function(map) {
                // 保存map对象实例
                this._map = map;
                // 创建div元素，作为自定义覆盖物的容器
                let div = document.createElement("div");
                div.style.position = "absolute";
                // 可以根据参数设置元素外观
                div.style.minWidth = 118 + "px";
                div.style.height = 30 + "px";
                div.style.background = this._color1;
                div.style.cursor = 'pointer';
                div.style.borderRadius = '5px';
                div.style.paddingRight = '5px';
                div.style.display = 'flex';
                let div_img = document.createElement("div");
                div_img.style.width = 30 + "px";
                div_img.style.height = 30 + "px";
                div_img.style.padding = 6 + "px";
                div_img.style.boxSizing = 'border-box';
                div_img.style.borderTopLeftRadius = '5px';
                div_img.style.borderBottomLeftRadius = '5px';
                div_img.style.background = this._color2;
                div_img.style.position = 'relative';
                let img = document.createElement("img");
                img.style.width = 18 + "px";
                img.style.height = 18 + "px";
                img.src=require('@/assets/images/control/streetNavIcon.png')

                let p_el = document.createElement("p");
                p_el.style.lineHeight='30px';
                p_el.style.fontSize='14px';
                p_el.style.width='100%';
                p_el.style.fontWeight='500';
                p_el.style.color='rgba(204, 234, 255, 1)';
                p_el.style.textAlign='center';
                p_el.style.paddingLeft='5px';
                p_el.style.paddingRight='5px';
                p_el.style.whiteSpace='nowrap';
                p_el.innerText=this.data.title;
                let div_bottom = document.createElement("div");
                div_bottom.style.position = 'absolute';
                div_bottom.style.top = '20px';
                div_bottom.style.left = '30px';
                div_bottom.style.width = 1 + "px";
                div_bottom.style.height = 100 + "px";
                div_bottom.style.boxShadow = "0px 0px 5px "+this._color1;
                div_bottom.style.background = 'linear-gradient(180deg, rgba(255, 255, 255, 0) 4.17%, rgba(255, 255, 255, 0.5) 45.31%, rgba(255, 255, 255, 0) 90.1%)';
                div_img.appendChild(img)
                div_img.appendChild(div_bottom)
                div.appendChild(div_img)
                div.appendChild(p_el)
                // 绑定点击事件
                div.onclick=function (){
                    that.$parent.modalData.show=true
                }
                // 将div添加到覆盖物容器中
                map.getPanes().markerPane.appendChild(div);
                // 保存div实例
                this._div = div;
            }
            // 实现绘制方法
            SquareOverlay.prototype.draw = function(){
            // 根据地理坐标转换为像素坐标，并设置给容器
                var position = this._map.pointToOverlayPixel(this._center);
                this._div.style.left = position.x -30+ "px";
                this._div.style.top = position.y - 130 + "px";
            }
            // 打点
            let marker = new SquareOverlay(point, "rgba(180, 4, 162, 1)","rgba(188, 31, 172, 1)",{title:'我是标题'});
            this.bmap.addOverlay(marker);
}

效果：