Legende im Google Maps Mashup korrigiert

Question

Ich habe eine Seite mit einem Google Maps-Mashup, das Pins enthält, die nach Tag (Montag, Dienstag usw.) farblich gekennzeichnet sind. Die Größe des IFrames, der die Karte enthält, ist dynamisch, sodass seine Größe geändert wird, wenn die Größe des Browserfensters geändert wird.

Ich möchte in der Ecke des Kartenfensters eine Legende platzieren, die dem Benutzer erklärt, was jede Farbe bedeutet.Die Google Maps-API umfasst a GScreenOverlay Klasse, die das von mir gewünschte Verhalten aufweist, mit der Sie jedoch nur ein Bild angeben können, das als Overlay verwendet werden soll, und ich würde lieber ein DIV mit Text darin verwenden.Was ist der einfachste Weg, ein DIV über dem Kartenfenster (zum Beispiel) in der unteren linken Ecke zu positionieren, das automatisch an der gleichen Stelle relativ zur Ecke bleibt, wenn die Größe des Browserfensters geändert wird?

Answer 1

Sie können Ihr eigenes benutzerdefiniertes Steuerelement hinzufügen und es als Legende verwenden.

Dieser Code fügt ein Feld mit den Maßen 150 B x 100 H (grauer Rand/mit weißem Hintergrund) und den Worten „Hello World“ darin hinzu.Sie ersetzen den Text durch einen beliebigen HTML-Code in der Legende.Dies bleibt oben rechts verankert (G_ANCHOR_TOP_RIGHT), 10 Pixel nach unten und 50 Pixel nach oben auf der Karte.

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

Ich würde HTML wie folgt verwenden:

<div id="wrapper">
   <div id="map" style="width:400px;height:400px;"></div>
   <div id="legend"> ... marker descriptions in here ... </div>
</div>

Anschließend können Sie dies so gestalten, dass die Legende unten rechts erhalten bleibt:

div#wrapper { position: relative; }
div#legend { position: absolute; bottom: 0px; right: 0px; }

position: relative bewirkt, dass alle enthaltenen Elemente relativ zum positioniert werden #wrapper Behälter und position: absolute wird dazu führen, dass #legend div aus dem Fluss „herausgezogen“ werden und über der Karte sitzen, wobei der untere rechte Rand am unteren Rand der Karte bleibt #wrapper und Dehnen nach Bedarf, um die Markierungsbeschreibungen aufzunehmen.