javascript - map自訂圖示 - pancontrol google maps




在Google地圖混搭中修復圖例 (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將導致#legend div被“拉出”流並且坐在地圖上方,保持它在右下方的邊緣#wrapper底部並根據需要進行拉伸以包含標記說明。

我有一個帶有Google Maps混搭的頁面,這個混搭的圖釘在白天(星期一,星期二等)進行顏色編碼。包含地圖的IFrame是動態調整大小的,所以當瀏覽器窗口調整大小時,它會被調整大小。

我想在地圖窗口的角落放置一個圖例,告訴用戶每種顏色的含義。 Google Maps API包含一個GScreenOverlay類,它具有我想要的行為,但它只允許您指定圖像作為疊加層使用,而我更願意使用帶有文本的DIV。 (例如)當瀏覽器窗口被調整大小時,左下角會自動停留在相對於角落的相同位置,在地圖窗口中放置DIV的最簡單方法是什麼?


您可以添加自己的自定義控件並將其用作圖例。

此代碼將在其中添加一個框150w x 100h(灰色邊框/白色背景)和單詞“Hello World”。 你換出任何你想在圖例中使用的HTML文本。 這將保持固定在地圖右上角(G_ANCHOR_TOP_RIGHT)10px下方和50px。

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());




google-maps-api-2