Исправлена ​​легенда в Google Maps Mashup - PullRequest
Новая
       26

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

9 голосов
/ 31 августа 2008

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

Я бы хотел поместить легенду в углу окна карты, которая сообщает пользователю, что означает каждый цвет. API Карт Google включает класс <a href="http://code.google.com/apis/maps/documentation/reference.html#GScreenOverlay" rel="nofollow noreferrer">GScreenOverlay</a>, который соответствует желаемому поведению, но он позволяет только указать изображение для использования в качестве наложения, и я предпочел бы использовать DIV с текстом в нем. Какой самый простой способ разместить DIV над окном карты (например, в нижнем левом углу), который автоматически останется на том же месте относительно угла при изменении размера окна браузера?

Ответы [ 2 ]

9 голосов
/ 04 сентября 2008

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

Этот код добавит поле 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 &#95;
};

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());
3 голосов
/ 31 августа 2008

Я бы использовал 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 и растягивание, необходимое для описания маркера.

...