Feste Legende in Google Maps-Mashup

Ich habe eine Seite mit einem Google Maps-mashup, das hat Pins, die sind farbcodiert, per Tag (Montag, Dienstag, usw.) Der IFrame mit der Karte ist dynamisch Größen, also es wird in der Größe verändert, wenn das Browserfenster skaliert wird.

Möchte ich eine Legende in der Ecke der Karte Fenster, das dem Benutzer sagt, was jede Farbe bedeutet. Die Google Maps API enthält eine GScreenOverlay Klasse, die das Verhalten, das ich will, aber es kann nur Sie geben ein Bild als overlay verwenden, und ich würde es vorziehen, verwenden Sie ein DIV mit text drin. Was ist der einfachste Weg, um die position eines DIV-über das Kartenfenster (zum Beispiel) der linken unteren Ecke, werden Sie automatisch bleiben in der gleichen Position relativ zu der Ecke, wenn das Browserfenster skaliert wird?

InformationsquelleAutor phenry | 2008-08-31
  1. 10

    Können Sie fügen Sie Ihre eigenen Benutzerdefinierten Steuerelement, und verwenden Sie es als eine Legende.

    Dieser code fügt eine box 150w x 100h (Grauer Rahmen/mit Weißem Hintergrund) und die Worte "Hallo Welt" drin sein. Tauschen Sie den text für jede HTML-möchten Sie in der Legende. Sie bleiben fest Verankert Oben Rechts (G_ANCHOR_TOP_RIGHT) 10px nach unten und 50 Pixel über 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());
    InformationsquelleAutor Bernie Perez
  2. 3

    Würde ich HTML verwenden, wie die folgenden:

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

    Dann können Sie diese Art zu halten, die Legende in der rechten unteren:

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

    position: relative verursachen alle enthaltenen Elemente werden relativ positioniert, um die #wrapper container, und position: absolute verursachen die #legend div zu werden "gezogen" aus dem Fluss und sitzen über der Karte, halten Sie die untere Rechte Kante an der Unterseite des #wrapper - und stretching-so erforderlich, enthalten die marker-Beschreibungen an.

    • Diese Lösung wurde überholt mit neueren Versionen der Google Maps API. Ab der version 3.8, dieses tutorial zeigt, wie das erstellen eines benutzerdefinierten Steuerelements und kann leicht angepasst werden, um zu zeigen, Legende: developers.google.com/maps/documentation/javascript/...
    • Wahrscheinlich benötigen einen z-index für das div-Legende
    InformationsquelleAutor Tom
Schreibe einen Kommentar