Truyền thuyết cố định trong Google Maps Mashup

Question

Tôi có một trang có ứng dụng trộn Google Maps có đinh ghim được mã hóa theo ngày (Thứ Hai, Thứ Ba, v.v.) IFrame chứa bản đồ có kích thước động, do đó nó được thay đổi kích thước khi cửa sổ trình duyệt được thay đổi kích thước.

Tôi muốn đặt chú thích ở góc cửa sổ bản đồ cho người dùng biết ý nghĩa của từng màu. API Google Maps bao gồm lớp học GScreenOverlay có hành vi mà tôi muốn nhưng nó chỉ cho phép bạn chỉ định hình ảnh để sử dụng làm lớp phủ và tôi muốn sử dụng DIV với văn bản trong đó. Cách dễ nhất để định vị một DIV trên cửa sổ bản đồ ở (ví dụ) góc dưới bên trái sẽ tự động ở cùng một vị trí so với góc khi cửa sổ trình duyệt được thay đổi kích thước là gì?

Answer 1

Bạn có thể thêm Kiểm soát tùy chỉnh của riêng mình và sử dụng nó làm chú giải.

Mã này sẽ thêm một hộp 150w x 100h (Đường viền màu xám/nền trắng) và dòng chữ "Hello World" bên trong. Bạn trao đổi văn bản cho bất kỳ HTML nào bạn muốn trong chú giải. Điều này sẽ được neo ở trên cùng bên phải (G_ANCHOR_TOP_RIGHT) 10px xuống và 50px so với bản đồ.

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

Tôi sẽ sử dụng HTML như sau:

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

Bạn có thể sau đó phong cách này để giữ cho huyền thoại ở góc dưới bên:

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

position: relative sẽ gây ra bất kỳ yếu tố chứa được vị trí tương đối đối với vùng chứa #wrapper và position: absolute sẽ khiến cho #legend div bị "kéo" ra khỏi luồng và ngồi phía trên bản đồ, giữ cạnh dưới cùng bên phải ở dưới cùng của #wrapper và kéo dài theo yêu cầu để chứa các mô tả điểm đánh dấu.