交互式平面图

Question

我正在开展一个项目，为办公室创建交互式平面图。我有一个建筑物平面图的 jpg 图形。这个想法是创建一个搜索栏，您可以在其中搜索员工，他们的办公室将在此图形上突出显示。

我最初的计划是使用地图标签并绘制每个办公室的坐标。我会使用 jQuery 来解析搜索值并将其链接到每个办公室坐标。但是，我了解到您无法向 map 标记添加样式，这使得这不可行。我尝试了其他一些解决方案，例如将图像转换为 .svg 并使用 svg 标签。这似乎也不起作用，因为 svg 标签似乎是为了在文档中动态创建图形。

谁能为我指出这个项目的正确方向？我一直回到第一方位，不知道从这里去哪里。

Answer 1

当在相对定位的容器中时，您可以在 div 上指定绝对位置（以指示平面图上的人员位置）。

然后您可以放置​​内部 div 的数据属性来计算位置。

<div style="position:relative;background:url(floorplan.jpg)">
   <div style="position:absolute;top:50%;left:25%" data-person="Liam"></div>
</div>

这确实涉及将这些部分分离到它们自己的 html 标记中，而不是“嵌入”到图像中。

旧版浏览器也不支持 SVG

然后您应该根据 data- 属性访问 div 并在 DOM 中对其进行修改。

然后您还可以使用 onmouseover（这不适用于触摸设备）来激活样式更改。