如何在谷歌地图或其他地图网站等页面中排列 div答案

【问题标题】：how to arrange the divs in the page like google map or other map site如何在谷歌地图或其他地图网站等页面中排列 div
【发布时间】：2011-09-23 10:55:43
【问题描述】：

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

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

1) the map tiles (small image 256X256)

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

3)the control.

我必须尝试阅读google和bing等的html源代码。但是我发现它们很难理解。

例如this frangment是从中国的另一个在线地图网站复制而来的。

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

但是拿代码来说，嵌套的div太多了，大部分都有“width:0;height:0”的属性，不知道为什么？

因为在我看来，标记只是一个图标，把它放在页面里就行了。

为什么要使用这么多嵌套的 div 甚至是“地图”标签？

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

谁能给点建议？

【问题讨论】：

标签： google-maps html map

【解决方案1】：

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

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

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

【讨论】：

+1 "别担心 Google/Bing/Yahoo 做了什么。他们的要求可能与您的不同。"

【解决方案2】：

您看过 Google 地图示例代码和演示库吗？

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

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

考虑到您提供的示例调用互联网以获取地图，我不确定您将如何使用此“离线”。此外，所有这些类型的地图都严重依赖 javascript 和 ajax 调用来不断更新地图。您的意思是这些页面是安全的而不是公开的吗？

【讨论】：

【解决方案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 调用重新调整自己的纹理（背景图像）。

至少我会这样做。

【讨论】：

【解决方案4】：

使用 Google Maps API，您可以在此处查看自定义图块示例：http://code.google.com/apis/maps/documentation/javascript/examples/maptype-base.html

您需要将所有文件复制到您的计算机上才能离线使用。你的 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);
}

【讨论】：