百度地圖apitypescript版本非同步新增動態按鈕
阿新 • • 發佈:2020-12-11
技術標籤:經驗分享typescript
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;"); } } } });
如果有更好的方法可以留言,謝謝。