如何在网页中安排div如google地图或其他地图网站

我们现在正在尝试构建像google/bing/yahoo这样的地图库，我们将在离线状态下使用它。如何在网页中安排div如google地图或其他地图网站

但是，我发现我不知道如何在页面中排列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甚至是“地图”标签？

但我认为他们必须具备我无法找到的优势。

任何人都可以提出一些建议吗？

来源

2011-09-23 hguser

通常情况下，当您要创建块元素时，您会在HTML中插入div，但不存在具有正确含义的更多语义加载元素。

我认为你的问题的答案是使用尽可能多的div元素，你需要为你的目的。不要因为可以增加更多。有时你根本不需要任何div元素 - 你可以使用其他更有意义的元素，如img，ul，p等。您有时可以避免使用CSS来将嵌入元素（例如a）更改为块元素来插入包装div。

如果您以后需要更多，请稍后再添加它们。不要担心Google/Bing/Yahoo做什么。他们的要求可能与您的要求不同。

来源

2011-09-26 16:18:29

+1“不要担心Google/Bing/Yahoo做什么，他们的要求可能与您的要求不同。 – dmck

你看过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调用来不断更新地图。你的意思是这些网页是安全的而不公开的？

来源

2011-09-25 23:21:20 Chrisdigital

你如何使用可能是一个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）。

这就是我会做的，至少。

来源

2011-09-25 23:36:15

使用谷歌地图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); 
}

来源

2011-10-01 22:00:58 Eric

如何在网页中安排div如google地图或其他地图网站

回答

相关问题