Исправлена ​​легенда в Google Maps Mashup

Question

У меня есть страница с гибридом Google Maps, в котором есть кнопки, которые имеют цветовую кодировку по дням (понедельник, вторник и т. д.). Размер IFrame, содержащего карту, имеет динамический размер, поэтому его размер изменяется при изменении размера окна браузера.

Я бы хотел разместить в углу окна карты легенду, которая сообщает пользователю, что означает каждый цвет. API Карт Google включает в себя GScreenOverlay имеет то поведение, которое мне нужно, но он позволяет вам только указать изображение для использования в качестве наложения, и я бы предпочел использовать DIV с текстом в нем. Какой самый простой способ разместить DIV над окном карты (например, в нижнем левом углу), который автоматически останется на том же месте относительно угла при изменении размера окна браузера?

Answer 1

Вы можете добавить свой собственный пользовательский элемент управления и использовать его в качестве легенды.

Этот код добавит поле 150 х 100 ч (серая рамка / с белым фоном) и слова " 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());

Answer 2

Я бы использовал 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 :lative приведет к тому, что любые содержащиеся элементы будут позиционированы относительно контейнера #wrapper , а position: absolute вызовет < code> #legend div, который нужно «вытащить» Выйдите из потока и сядьте над картой, удерживая ее правый нижний край в нижней части #wrapper и растягивая, как требуется, для описания маркеров.