百度地图创建图例

   

有部分博主标记地图使用了百度地图开放平台,在这里共享一个自己实验成功的图例(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);

效果:

Baidu map legend

共有 0 条评论

           

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用 * 标注