如何在網頁中安排div如google地圖或其他地圖網站

Question

我們現在正在嘗試構建像google/bing/yahoo這樣的地圖庫，我們將在離線狀態下使用它。

但是，我發現我不知道如何在頁面中排列div，因爲有許多不同類型的div。

1) the map tiles (small image 256X256) 

2)the overlayer(marker/informationwindow/polygon...) 

3)the control. 

我必須嘗試閱讀谷歌和bing等html源代碼，但我發現它很難理解它們。

例如，this frangment是從中國的另一個在線地圖網站複製的。

正如你所看到的，它只是一個如何在地圖上添加標記的例子。

但是拿這些代碼，有這麼多嵌套的div，其中大部分都具有「width：0; height：0」的屬性，我不知道爲什麼？

因爲在我看來，標記只是一個圖標，只是把它放在頁面中。

爲什麼要使用如此多的嵌套div甚至是「地圖」標籤？

但我認爲他們必須具備我無法找到的優勢。

任何人都可以提出一些建議嗎？

Answer 1

通常情況下，當您要創建塊元素時，您會在HTML中插入div，但不存在具有正確含義的更多語義加載元素。

我認爲你的問題的答案是使用盡可能多的div元素，你需要爲你的目的。不要因爲可以增加更多。有時你根本不需要任何div元素 - 你可以使用其他更有意義的元素，如img，ul，p等。您有時可以避免使用CSS來將嵌入元素（例如a）更改爲塊元素來插入包裝div。

如果您以後需要更多，請稍後再添加它們。不要擔心Google/Bing/Yahoo做什麼。他們的要求可能與您的要求不同。

Answer 2

你看過Google Maps示例代碼和演示庫嗎？

http://code.google.com/apis/maps/documentation/javascript/demogallery.html

http://code.google.com/apis/maps/documentation/javascript/examples/index.html

我不知道你將如何使用這個「離線」考慮到你所提供的樣品，使與互聯網的調用來獲取地圖。此外，所有這些類型的地圖都嚴重依賴於JavaScript和Ajax調用來不斷更新地圖。你的意思是這些網頁是安全的而不公開的？

Answer 3

你如何使用可能是一個5x5的div網格，將它們拖出視圖時移動它們，然後使用AJAX調用動態地對它們進行紋理處理。

如果我正確地理解了你，所有的圖層都可以用z-index相互引用。

<div id="control" style="z-index:-1;"></div> 
<div id="overlay" style="z-index:-2;"></div> 
<div id="map" style="z-index:-3;"></div> 

然後，您可以使用每個div作爲地圖不同部分的容器。

當你拖動1 div到右邊時，它會自動碰撞到你的網格的左邊，並通過ajax調用自身重新紋理（background-image）。

這就是我會做的，至少。

Answer 4

使用谷歌地圖API，你可以在這裏看到定製瓷磚的例子：http://code.google.com/apis/maps/documentation/javascript/examples/maptype-base.html

您需要的所有文件複製到你的電腦是exceccible下線。您的javascript看起來是這樣的：

function CoordMapType() { 
} 

CoordMapType.prototype.tileSize = new google.maps.Size(256,256); 
CoordMapType.prototype.maxZoom = 19; 

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 
    var div = ownerDocument.createElement('DIV'); 
    div.style.backgroundImage=coord+'.js'; 
    return div; 
}; 

CoordMapType.prototype.name = "Tile #s"; 
CoordMapType.prototype.alt = "Tile Coordinate Map Type"; 

var map; 
var chicago = new google.maps.LatLng(41.850033,-87.6500523); 
var coordinateMapType = new CoordMapType(); 

function initialize() { 
    var mapOptions = { 
    zoom: 10, 
    streetViewControl: false, 
    mapTypeId: 'coordinate', 
    mapTypeControlOptions: {} 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    google.maps.event.addListener(map, 'maptypeid_changed', function() { 
    var showStreetViewControl = map.getMapTypeId() != 'coordinate'; 
    map.setOptions({'streetViewControl': showStreetViewControl}); 
    }); 

    // Now attach the coordinate map type to the map's registry 
    map.mapTypes.set('coordinate', coordinateMapType); 
}