谷歌地图mashup中的固定图例

您可以添加自己的自定义控件并将其用作图例。

此代码将添加一个150w x 100h的框(灰色边框/白色背景),其中包含“Hello World”字样。您可以将文本替换为您希望在图例中显示的任何HTML。这将保持锚定在地图的右上角(G锚定在右上角),向下10像素,上方50像素。

function MyPane() {}
MyPane.prototype = new GControl;
MyPane.prototype.initialize = function(map) {
  var me = this;
  me.panel = document.createElement("div");
  me.panel.style.width = "150px";
  me.panel.style.height = "100px";
  me.panel.style.border = "1px solid gray";
  me.panel.style.background = "white";
  me.panel.innerHTML = "Hello World!";
  map.getContainer().appendChild(me.panel);
  return me.panel;
};

MyPane.prototype.getDefaultPosition = function() {
  return new GControlPosition(
      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
      //Should be _ and not _
};

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());

我将使用如下HTML:

<div id="wrapper">
   <div id="map" style="width:400px;height:400px;"></div>
   <div id="legend"> ... marker descriptions in here ... </div>
</div>

然后,您可以设置此样式,使图例保持在右下角:

div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }

position: relative 将导致任何包含的元素相对于 #wrapper 容器,以及 position: absolute 将导致 #legend DIV将从流中“拉出”,并位于地图上方,使其右下角位于 包裹器 根据需要进行拉伸以包含标记描述。