Исправлена легенда в Mashup Google Maps
У меня есть страница с мэшапом Google Maps, на которой есть кнопки с цветовой кодировкой по дням (понедельник, вторник и т. д.). IFrame, содержащий карту, имеет динамический размер, поэтому он изменяется при изменении размера окна браузера.
Я хотел бы поместить легенду в углу окна карты, которая сообщает пользователю, что означает каждый цвет. Google Maps API включает класс GScreenOverlay, который имеет нужное мне поведение, но он позволяет вам только указать изображение для использования в качестве наложения, и я бы предпочел использовать DIV с текстом в нем. Какой самый простой способ разместить DIV над окном карты (например) в нижнем левом углу, который автоматически останется на том же месте относительно угла при изменении размера окна браузера?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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: relative приведет к тому, что все содержащиеся элементы будут расположены относительно контейнера #wrapper, а position: absolute приведет к тому, что div #legend будет "вытянут" из потока и разместится над картой, сохраняя его нижний правый край внизу #wrapper и растягивая как требуется, чтобы содержать описания маркеров.
Вероятно, понадобится z-index для легенды div
Вы можете добавить свой собственный пользовательский элемент управления и использовать его в качестве легенды.
Этот код добавит коробку 150 x 100 h (серая граница / с белым фоном) и слова «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());
Это решение устарело в новых версиях API Карт Google. Начиная с версии 3.8, в этом руководстве показано, как создать настраиваемый элемент управления, и его можно легко адаптировать для отображения легенды: developers.google.com/maps/documentation/javascript/…