使用CSS深入挖掘数据的图形映射

Question

我们有一个新项目，客户是一个大型住宅区。有10个区/区（1区，2区等），客户提供了地图。

每个区有3-4栋住宅楼，每栋楼都有公寓楼。 每栋公寓楼都有可供出租的房间。

客户需要每个级别的图形地图（整个区域，每个区域，每个建筑物，每个公寓，每个房间）。

地图没有完美的形状。 我们已经完成了数据库，并且我们已经深入了解表格数据。 我们正在寻找每个级别地图的PNG，并在地图的特定区域上显示某种覆盖DIV，显示绿色（可用房间），红色（占用）等...或者像150这样的计数器 - 可用，235-可用。

用户可以点击每个地图区域，并通过深入查看其他MAPS获取更多详细信息。 我们已经研究了创建一个包含字段的表来动态生成html：

<map name="mapDistrict"> <area shape="circle" coords="90,58,3" href=" Building/1" alt=" Building 1"> <area shape=" poly" coords="124,58,8" href=" Building/2" alt=" Building 2"> </map>

有更好的解决方案吗？我们想使用CSS，Javascript（JQUERY）..没有FLASH！

Answer 1

我已多次完成此类房地产地图。你正在做的是非常有效的。您可能希望使用JS数组或JSON将单位映射到坐标和每个坐标的状态。

对于整个建筑物，您可能需要查看以下内容：http://www.netzgesta.de/mapper/，它将地图区域转换为彩色叠加层。

有些other approaches您可能需要考虑使用方形定位链接。

您还可以将事件连接到区域地图以显示叠加层：

<area COORDS="80,88,120,125" HREF="#" onMouseOver="showUnit('a')">