9

我有一个带有 Google Maps mashup 的页面，该页面具有按天（星期一、星期二等）进行颜色编码的图钉。包含地图的 IFrame 是动态调整大小的，因此在调整浏览器窗口大小时它会调整大小。

我想在地图窗口的一角放置一个图例，告诉用户每种颜色的含义。Google Maps API 包含一个GScreenOverlay具有我想要的行为的类，但它只允许您指定要用作叠加层的图像，而且我更喜欢使用带有文本的 DIV。将 DIV 放置在地图窗口上（例如）左下角的最简单方法是什么，当浏览器窗口调整大小时，它会自动保持在相对于角落的同一位置？

4

2 回答 2

10

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

此代码将添加一个 150w x 100h 的框（灰色边框/白色背景）和其中的“Hello World”字样。您可以将文本换成图例中想要的任何 HTML。这将保持锚定在地图右上方 (G_ANCHOR_TOP_RIGHT) 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());
于 2008-09-03T23:06:29.817 回答
3

我会使用如下 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并将导致#legenddiv 被“拉”出流程并位于地图上方，将其右下边缘保持在底部#wrapper并根据需要拉伸以包含标记说明。

于 2008-08-31T12:25:02.083 回答