Fixed Legend в Google Maps Mashup

голоса
9

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

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

Задан 31/08/2008 в 01:41
источник пользователем
На других языках...                            


2 ответов

голоса
9

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

Этот код добавит окно 150w х 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());
Ответил 04/09/2008 в 00:06
источник пользователем

голоса
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заставит #legendДИВ быть «вытащил» из потока и сидеть над картой, держа его нижний правый край в нижней части #wrapperи растяжения по мере необходимости содержать описания маркеров.

Ответил 31/08/2008 в 13:25
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more