单击交互式图像地图时显示摘要详细信息

Question

得到这个交互式图像地图（不是谷歌地图）。 想知道 1) 由于现在它链接到另一个页面 (doRpMap.php)，此页面将显示与该可点击区域相关的所有事件的摘要详细信息。当用户单击该区域并显示该建筑物中发生的所有事件时，如何让系统检查数据库？

这些是我现在修改的代码.. 请建议和谢谢。

<svg width="100%" viewBox="0 0 1600 2200">
                <image x="50" y="50" width="1500" height="2000" xlink:href="images/Campus-map.jpg" />
                <a xlink:href="doRpMap.php">
                    <image x="500" y="400" width="60" height="60" xlink:href="images/redTack.png" alt="Sports Complex" />
                    <image x="650" y="250" width="60" height="60" xlink:href="images/redTack.png" alt="Campus Heights Child Care Centre" />
                    <image x="800" y="200" width="60" height="60" xlink:href="images/redTack.png" alt="Republic Hospitality Centre (RHC)" />
                    <image x="970" y="400" width="60" height="60" xlink:href="images/redTack.png" alt="Adventure Learning Centre" />
                    <image x="300" y="500" width="60" height="60" xlink:href="images/redTack.png" alt="The ARCH" />
                    <image x="350" y="700" width="60" height="60" xlink:href="images/redTack.png" alt="Sports Hall" />
                    <image x="550" y="650" width="60" height="60" xlink:href="images/redTack.png" alt="Swimming Complex" />
                    <image x="170" y="800" width="60" height="60" xlink:href="images/redTack.png" alt="Basketball Court" />
                    <image x="780" y="820" width="60" height="60" xlink:href="images/redTack.png" alt="North Food Court" />
                    <image x="950" y="820" width="60" height="60" xlink:href="images/redTack.png" alt="E6" />
                    <image x="1150" y="980" width="60" height="60" xlink:href="images/redTack.png" alt="E5" />
                    <image x="1100" y="1050" width="60" height="60" xlink:href="images/redTack.png" alt="Agora Halls" />
                    <image x="950" y="1050" width="60" height="60" xlink:href="images/redTack.png" alt="Library" />
                    <image x="750" y="1100" width="60" height="60" xlink:href="images/redTack.png" alt="Lawn Food Court @ Level 3" />
                    <image x="760" y="1000" width="60" height="60" xlink:href="images/redTack.png" alt="W6" />
                    <image x="620" y="1100" width="60" height="60" xlink:href="images/redTack.png" alt="W5" />
                    <image x="600" y="1170" width="60" height="60" xlink:href="images/redTack.png" alt="ACEL Lab" />
                    <image x="770" y="1250" width="60" height="60" xlink:href="images/redTack.png" alt="W4" />
                    <image x="950" y="1170" width="60" height="60" xlink:href="images/redTack.png" alt="Reel Room Cafe" />
                    <image x="1120" y="1220" width="60" height="60" xlink:href="images/redTack.png" alt="E4" />
                    <image x="1120" y="1420" width="60" height="60" xlink:href="images/redTack.png" alt="E2" />
                    <image x="950" y="1300" width="60" height="60" xlink:href="images/redTack.png" alt="E3" />
                    <image x="600" y="1300" width="60" height="60" xlink:href="images/redTack.png" alt="W3" />
                    <image x="600" y="1500" width="60" height="60" xlink:href="images/redTack.png" alt="W2" />
                    <image x="950" y="1500" width="60" height="60" xlink:href="images/redTack.png" alt="E1" />
                    <image x="770" y="1650" width="60" height="60" xlink:href="images/redTack.png" alt="W1" />
                    <image x="950" y="1600" width="60" height="60" xlink:href="images/redTack.png" alt="South Food Court" />
                    <image x="1300" y="1700" width="60" height="60" xlink:href="images/redTack.png" alt="The Republic Cultural Centre (TRCC)" />
                    <image x="950" y="1750" width="60" height="60" xlink:href="images/redTack.png" alt="Republic Polytechnic Centre (RPC)" />
                    <image x="950" y="1970" width="60" height="60" xlink:href="images/redTack.png" alt="One-Stop Centre" />
                    <image x="800" y="1850" width="60" height="60" xlink:href="images/redTack.png" alt="Retail Shops" />
                </a>
                </svg>

Answer 1

HTML 在过去几年中为地图添加了大量功能。您可能想探索一些关于 SVG、视图框、视口和其他技术的教程。

大部分教程使用除法而不是表格。

最简单的做法是使外部分区位置=相对，然后将内部元素的绝对位置设置为该分区。

类似：see example

<div style="position: relative; width: 1000px; height: 500px;">
 <img src="[url to background image]" width="1000" height="500" alt="Map" >
 <img id="pt3" style="position: absolute; left: 657px; top:250px;" src="tack.png" >
</div>

属性“位置：相对”表示块中的图像应该相对于块。然后你使用 position:absolute 来放置物品。措辞不直观。

viewbox 概念可能会对您有所帮助。它可以让您设计独立于显示的地图。 Viewbox 可以轻松调整图形显示的大小。

在响应式设计中，您希望外部容器成为与浏览器大小相关的视口。这样，图像可以扩展或收缩以填满屏幕。

如果您想认真对待地图，我会考虑使用 SVG。这样您就可以使用 SVG 绘制地图上出现的实际事物。

视图框的打开代码可能类似于：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1" width="600" viewBox="-500,-250 500,250">

此框为 1000 x 500 像素。中心点是 (0,0)。

see example

我对 svg 地图的第一次尝试是在 http:arizonacolor.us 的底部。我的相对定位映射尝试在 maps.protophoto.com 上