有部分博主标记地图使用了百度地图开放平台,在这里共享一个自己实验成功的图例(Legend)代码。
/* 创建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);
效果:
0