ثابت أسطورة في خرائط Google المزج
-
09-06-2019 - |
سؤال
لدي صفحة مع خرائط جوجل المزج الذي الدبابيس التي هي مرمزة يوم (الاثنين ، الثلاثاء ، إلخ.) IFrame تحتوي على خريطة حيوي الحجم حتى يصبح حجمها عندما يتم تغيير حجم نافذة المتصفح.
أود أن وضع أسطورة في زاوية الخريطة نافذة تخبر المستخدم ماذا يعني كل لون.خرائط جوجل API يتضمن GScreenOverlay
فئة يحتوي على السلوك الذي أريد ، بل يتيح لك تحديد صورة إلى استخدام تراكب, و أنا أفضل أن استخدام شعبة مع النص في ذلك.ما هي أسهل طريقة لوضع DIV على الخريطة في نافذة (على سبيل المثال) الزاوية اليسرى السفلى التي سوف تلقائيا البقاء في نفس المكان بالنسبة إلى الزاوية عندما يتم تغيير حجم نافذة المتصفح?
المحلول
يمكنك إضافة المخصصة الخاصة بك والتحكم على أنها أسطورة.
هذا الكود سيتم إضافة مربع 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());
نصائح أخرى
وأود أن استخدام 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
وتمتد على النحو المطلوب أن تحتوي على علامة الأوصاف.