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

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

解决方案

回答

我将使用如下所示的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被"拉出"流程并位于地图上方，使其位于#wrapper底部的右下边缘，并根据需要进行拉伸以包含标记说明。

回答

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

此代码将在其中添加一个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());