修复了Google地图混搭中的图例

Question

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

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

Answer 1

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

此代码将添加一个150w x 100h(灰色边框/带白色背景)框和其中的"Hello World"字样.您可以在图例中替换所需的任何HTML文本.这将保持锚定到右上方(G_ANCHOR_TOP_RIGHT)10px向下和50px超过地图.

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());