Google maps 如何像谷歌地图或其他地图站点一样排列页面中的div

我们现在正在尝试建立一个像google/bing/yahoo这样的地图库，我们将离线使用它

然而，我发现我不知道如何排列页面中的div，因为有许多不同类型的div

1) the map tiles (small image 256X256)

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

3)the control.

我不得不尝试阅读谷歌和必应等的html源代码，但我发现很难理解它们

对于exmaple，它是从另一个中国在线地图网站复制的

如您所见，这只是一个如何向地图添加标记的示例

但是拿代码来说，有这么多嵌套的div，大多数都有“width:0；height:0”的属性，我不知道为什么

因为在我看来，标记只是一个图标，只要把它放在页面上

为什么要使用这么多嵌套div甚至“map”标记

但我认为他们一定有我找不到的优势

---

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

您看过谷歌地图示例代码和演示库了吗

---

考虑到您提供的示例打电话到internet获取地图，我不确定您将如何使用此“脱机”。此外，所有这些类型的映射都严重依赖javascript和ajax调用来不断更新映射。你是说这些页面是安全的而不是公开的吗？

你可以使用一个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调用重新构建自己（背景图像）

---

至少我会这么做。

当您想要创建块元素时，通常会在HTML中插入一个div，但是没有更多语义加载的元素具有正确的含义

我认为您的问题的答案是使用尽可能多的div元素。不要仅仅因为你可以添加更多。有时您根本不需要任何div元素-您可以使用其他更有意义的元素，如img、ul、p等。有时您可以通过使用CSS将内联元素（如a）更改为块元素来避免插入换行div

---

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

使用谷歌地图API，您可以在此处看到定制瓷砖的示例：

您需要将所有文件复制到您的计算机上，才能例外地脱机。您的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);
}

+1“不要担心Google/Bing/Yahoo会做什么。他们的要求可能与你的不同。”