Question

我们现在正在尝试构建像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甚至是“map”标签？

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

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

Answer 1

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

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

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

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

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调用重新构造自身（背景图像）。

这就是我要做的，至少。

Answer 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);
}

如何安排页面中的div像谷歌地图或其他地图网站

4 个答案: