百度地图apitypescript版本异步添加动态按钮

1.创建地图：

const map = this.map = new BMap.Map(this.mapElement.nativeElement, { minZoom: 5, maxZoom: 21, enableMapClick: true });

map.disableKeyboard();
map.disableDoubleClickZoom();

map.enableScrollWheelZoom(); // 允许滚动缩放功能
map.disableContinuousZoom();

map.enablePinchToZoom();
map.clearOverlays();

 

2.左上角添加自定义元素以及点击事件

       function showTabTransferSitingControl() { this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); }
        showTabTransferSitingControl.prototype = new BMap.Control();
        showTabTransferSitingControl.prototype.initialize = () => {
            const div = document.createElement("div");
            const tab1 = document.createElement("button");
            tab1.style.width = "2.81rem";
            tab1.style.height = "2rem";
            tab1.style.borderRadius = "0.19rem";
            tab1.style.background = "rgba(255,255,255,1)";
            if (formatAppData.tabs.currentTab === undefined) { formatAppData.tabs.currentTab = 1; }
            // tslint:disable-next-line:radix
            if (parseInt(formatAppData.tabs.currentTab + '') === formatAppData.tabs.data[0].indexTab) {
                if (this.appTypeCustom === 'LJ') {
                    tab1.style.border = "0.03rem solid #FFAA00";
                    tab1.style.background = 'rgba(255, 202, 58, 0.1)';
                } else {
                    tab1.style.border = "0.03rem solid rgba(255,99,20,1)";
                    tab1.style.background = '#ffffff';
                }
            } else {
                tab1.style.border = "0rem";
            }
            tab1.style.textAlign = "center";
            tab1.style.marginTop = "0.13rem";
            tab1.style.marginLeft = "0.13rem";
            tab1.style.marginRight = "0.13";
            const pShop = document.createElement("p");
            pShop.style.width = "1.7rem";
            pShop.style.height = "0.81rem";
            pShop.style.fontSize = "0.81rem";
            // tslint:disable-next-line:radix
            if (parseInt(formatAppData.tabs.currentTab + '') === formatAppData.tabs.data[0].indexTab) {
                if (this.appTypeCustom === 'LJ') {
                    pShop.style.color = "#946C00";
                } else {
                    pShop.style.color = "rgba(255,99,20,1)";
                }
            } else {
                if (this.appTypeCustom === 'LJ') {
                    pShop.style.color = "#575A61";
                } else {
                    pShop.style.color = "rgba(92,94,102,1)";
                }

            }
            pShop.style.marginLeft = "0.63rem";
            pShop.appendChild(document.createTextNode(formatAppData.tabs.data[0].label));
            const tab2 = document.createElement("button");
            tab2.style.width = "2.81rem";
            tab2.style.height = "2rem";
            // tslint:disable-next-line:radix
            if (parseInt(formatAppData.tabs.currentTab + '') === formatAppData.tabs.data[0].indexTab) {
                tab2.style.border = "0px";
                tab2.style.background = '#ffffff';
            } else {
                if (this.appTypeCustom === 'LJ') {
                    tab2.style.border = "0.03rem solid #FFAA00";
                    tab2.style.background = 'rgba(255, 202, 58, 0.1)';
                } else {
                    tab2.style.border = "0.03rem solid rgba(255,99,20,1)";
                    tab2.style.background = '#ffffff';
                }
            }
            tab2.style.borderRadius = "0.19rem";
            tab2.style.textAlign = "center";
            tab2.style.marginTop = "0.13rem";
            const pSiting = document.createElement("p");
            pSiting.style.width = "1.7rem";
            pSiting.style.height = "0.81rem";
            pSiting.style.fontSize = "0.81rem";
            // tslint:disable-next-line:radix
            if (parseInt(formatAppData.tabs.currentTab + '') === formatAppData.tabs.data[0].indexTab) {
                if (this.appTypeCustom === 'LJ') {
                    pSiting.style.color = "#575A61";
                } else {
                    pSiting.style.color = "rgba(255,99,20,1)";
                }
            } else {
                if (this.appTypeCustom === 'LJ') {
                    pSiting.style.color = "#946C00";
                } else {
                    pSiting.style.color = "rgba(92,94,102,1)";
                }

            }
            pSiting.style.marginLeft = "0.63rem";
            pSiting.appendChild(document.createTextNode(formatAppData.tabs.data[1].label));
            tab1.appendChild(pShop);
            tab2.appendChild(pSiting);
            // const pStore = JSON.parse(localStorage.getItem('mapPosition'));
            tab1.onclick = ((e) => {
                tab1.style.border = "0.03rem solid rgba(255,99,20,1)";
                tab2.style.border = "0rem";
                if (this.appTypeCustom === 'LJ') {
                    pShop.style.color = "#946C00";
                    pSiting.style.color = "#575A61";
                    tab1.style.background = 'rgba(255, 202, 58, 0.1)';
                    tab2.style.background = '#ffffff';
                } else {
                    pShop.style.color = "rgba(255,99,20,1)";
                    pSiting.style.color = "rgba(92,94,102,1)";
                    tab1.style.background = '#ffffff';
                    tab2.style.background = '#ffffff';
                }

                const params = {
                    content: {
                        level: "city",
                        code: this.cityLabel.name === '' ? JSON.parse(localStorage.getItem('mapPosition')).code : this.cityLabel.code,
                        dataType: formatAppData.tabs.data[0].indexTab,
                        mapGroupBy: 'opportunity_city_id'
                    },
                    id: formatId,
                    sessionId: localStorage.getItem('sessionId')
                };
                this.httpService.post('application/submit', params, (res) => {
                    if (res) {
                        // that.tagData.appDataMapList.data = JSON.parse(res.data.data);
                        if (typeof res.data.data !== 'string') {
                            that.tagData.appDataMapList.data = res.data.data;
                        } else {
                            that.tagData.appDataMapList.data = JSON.parse(res.data.data);
                        }
                        that.formatCityData.infoList = that.tagData.appDataMapList.data.infoList;
                        that.formatCityData.stateTabs = that.tagData.appDataMapList.data.stateTabs;
                        that.formatCityData.statistics = that.tagData.appDataMapList.data.statistics;
                        that.initMap(pt);
                    }
                });
            });
            tab2.onclick = ((e) => {
                tab2.style.border = "0.03rem solid rgba(255,99,20,1)";
                tab1.style.border = "0rem";
                if (this.appTypeCustom === 'LJ') {
                    pShop.style.color = "#575A61";
                    pSiting.style.color = "#946C00";
                    tab2.style.background = 'rgba(255, 202, 58, 0.1)';
                    tab1.style.background = '#ffffff';
                } else {
                    pShop.style.color = "rgba(92,94,102,1)";
                    pSiting.style.color = "rgba(255,99,20,1)";
                    tab2.style.background = '#ffffff';
                    tab1.style.background = '#ffffff';
                }
                const params = {
                    content: {
                        level: "city",
                        dataType: formatAppData.tabs.data[1].indexTab,
                        code: this.cityLabel.name === '' ? JSON.parse(localStorage.getItem('mapPosition')).code : this.cityLabel.code,
                        mapGroupBy: 'opportunity_expect_district',
                    },
                    id: formatId,
                    sessionId: localStorage.getItem('sessionId')
                };
                this.httpService.post('application/submit', params, (res) => {
                    if (res) {
                        if (typeof res.data.data !== 'string') {
                            that.tagData.appDataMapList.data = res.data.data;
                        } else {
                            that.tagData.appDataMapList.data = JSON.parse(res.data.data);
                        }
                        that.formatCityData.infoList = that.tagData.appDataMapList.data.infoList;
                        that.formatCityData.stateTabs = that.tagData.appDataMapList.data.stateTabs;
                        that.formatCityData.statistics = that.tagData.appDataMapList.data.statistics;
                        that.initMap(pt);
                    }
                });
            });
            div.appendChild(tab1);
            div.appendChild(tab2);
            div.style.width = "6rem";
            div.style.height = "2.25rem";
            if (this.appTypeCustom === 'LJ') {
                div.style.boxShadow = "0rem 0.06rem 0.25rem 0rem rgba(37, 38, 41, 0.1)";
            } else {
                div.style.boxShadow = "0rem 0.06rem 0.25rem 0rem rgba(39,40,46,0.1)";
            }
            div.style.background = "rgba(255,255,255,1)";
            div.style.borderRadius = "0.31rem";
            map.getContainer().appendChild(div);
            return div;
        };
        const tabs = new showTabTransferSitingControl();

3.当地图完成加载隐藏logo

        map.addEventListener("tilesloaded", () => {
            // tslint:disable-next-line:max-line-length
            const objs = document.getElementsByClassName(" anchorBL");
            if (objs !== undefined && objs.length > 0) {
                for (let i = 0, len = objs.length; i < len; i++) {
                    if (objs[i] !== undefined) { objs[i].setAttribute("style", "display:none;"); }
                }
            }
        });

如果有更好的方法可以留言，谢谢。