ثابت أسطورة في خرائط Google المزج

Question

لدي صفحة مع خرائط جوجل المزج الذي الدبابيس التي هي مرمزة يوم (الاثنين ، الثلاثاء ، إلخ.) IFrame تحتوي على خريطة حيوي الحجم حتى يصبح حجمها عندما يتم تغيير حجم نافذة المتصفح.

أود أن وضع أسطورة في زاوية الخريطة نافذة تخبر المستخدم ماذا يعني كل لون.خرائط جوجل API يتضمن GScreenOverlay فئة يحتوي على السلوك الذي أريد ، بل يتيح لك تحديد صورة إلى استخدام تراكب, و أنا أفضل أن استخدام شعبة مع النص في ذلك.ما هي أسهل طريقة لوضع DIV على الخريطة في نافذة (على سبيل المثال) الزاوية اليسرى السفلى التي سوف تلقائيا البقاء في نفس المكان بالنسبة إلى الزاوية عندما يتم تغيير حجم نافذة المتصفح?

Answer 1

يمكنك إضافة المخصصة الخاصة بك والتحكم على أنها أسطورة.

هذا الكود سيتم إضافة مربع 150w x 100h (الحدود الرمادي/ مع خلفية بيضاء) و عبارة "مرحبا العالم" داخله.يمكنك مبادلة خارج النص أي 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 _
};

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());

Answer 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 وتمتد على النحو المطلوب أن تحتوي على علامة الأوصاف.