在Google地图混搭中修复图例 [英] Fixed Legend in Google Maps Mashup

问题描述

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

I have a page with a Google Maps mashup that has pushpins that are color-coded by day (Monday, Tuesday, etc.) The IFrame containing the map is dynamically sized, so it gets resized when the browser window is resized.

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

I'd like to put a legend in the corner of the map window that tells the user what each color means. The Google Maps API includes a GScreenOverlay class that has the behavior that I want, but it only lets you specify an image to use as an overlay, and I'd prefer to use a DIV with text in it. What's the easiest way to position a DIV over the map window in (for example) the lower left corner that'll automatically stay in the same place relative to the corner when the browser window is resized?

推荐答案

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

You can add your own Custom Control and use it as a legend.

此代码将添加一个盒子150w x 100h（灰色边框/带白色背景）以及里面的文字Hello World。您将图例替换为图例中您想要的任何HTML文本。这将停留在顶部右侧（G_ANCHOR_TOP_RIGHT）10px向下和50px以上的地图上。

This code will add a box 150w x 100h (Gray Border/ with White Background) and the words "Hello World" inside of it. You swap out the text for any HTML you would like in the legend. This will stay Anchored to the Top Right (G_ANCHOR_TOP_RIGHT) 10px down and 50px over of the map.

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

这篇关于在Google地图混搭中修复图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！