9

日 (月曜日、火曜日など) によって色分けされた画鋲を含む Google マップ マッシュアップのページがあります。マップを含む IFrame は動的にサイズ変更されるため、ブラウザー ウィンドウのサイズが変更されるとサイズが変更されます。

各色の意味をユーザーに伝える凡例をマップ ウィンドウの隅に表示したいと思います。Google Maps API には、GScreenOverlay私が望む動作を持つクラスが含まれていますが、オーバーレイとして使用する画像を指定することしかできず、テキストを含む DIV を使用することをお勧めします。ブラウザー ウィンドウのサイズが変更されたときに、マップ ウィンドウの左下隅に DIV を配置する最も簡単な方法は何ですか?

4

2 に答える 2

10

独自のカスタム コントロールを追加して、凡例として使用できます。

このコードは、幅 150 x 高さ 100 のボックス (灰色の境界線/背景が白) を追加し、その中に "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());
于 2008-09-03T23:06:29.817 に答える
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、#legenddivがフローから「プル」されてマップの上に配置され、右下の端が下部に保持さ#wrapperれ、必要に応じてストレッチされます。マーカーの説明。

于 2008-08-31T12:25:02.083 に答える