Original link: https://synyan.cn/t/40342
Some bloggers marked the map using the Baidu map open platform, and shared a legend code of their own successful experiment here.
/* 创建Legend图例*/ function ShowLegendControl() { this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT ;//默认在右下角 this.defaultOffset = new BMap.Size(5, 15);// 默认偏移量} ShowLegendControl.prototype = new BMap.Control(); ShowLegendControl.prototype.initialize = function(map) { // 创建一个DOM元素 var div0 = document.createElement("span"); div0.id = "legend"; div0.style.background="White"; div0.style.padding="2px"; div0.style.opacity="0.7"; div0.style.borderRadius = "5px 5px 5px 5px"; div0.style.width = "50px"; div0.style.height = "65px"; div0.style.position = "absolute"; var legendRed = document.createElement("div"); legendRed.innerHTML= "<span style='font-size:16px;font-family:webfont,Heiti SC,Microsoft YaHei,sans-serif;'><img style='width:auto;height:16px;text-align:center;margin:0 auto;' src='../Red.png'> 去过</span>"; var legendPink = document.createElement("div"); legendPink.innerHTML= "<span style='font-size:16px;font-family:webfont,Heiti SC,Microsoft YaHei,sans-serif;'><img style='width:auto;height:16px;text-align:center;margin:0 auto;opacity:0.5;' src='../Red.png'> 路过</span>"; var legendGold = document.createElement("div"); legendGold.innerHTML= "<span style='font-size:16px;font-family:webfont,Heiti SC,Microsoft YaHei,sans-serif;'><img style='width:auto;height:16px;text-align:center;margin:0 auto;' src='../Gold.png'> 计划</span>"; div0.appendChild(legendRed); div0.appendChild(legendPink); div0.appendChild(legendGold); // 添加DOM 元素到地图中 map.getContainer().appendChild(div0); // 将DOM 元素返回 return div0; } // 创建控件var showLegendCtrl = new ShowLegendControl(); // 添加到地图当中map.addControl(showLegendCtrl);
Effect:
Baidu map legend
This article is reproduced from: https://synyan.cn/t/40342
This site is for inclusion only, and the copyright belongs to the original author.