Question

我是一名新手网络开发人员，我希望将数据点放在可以在悬停时与之交互的图像上，类似于最常见的地图应用程序。

根据我目前的理解，在Javascript中使用Canvas似乎是最好的方法，有没有人对如何做到这一点有任何建议，并且可能指出我正确的方向？

Answer 1

虽然可以使用画布，但不需要画布。

最短编码将使背景图像成为您想要放置点的图像的div。

如果它不是图像，那么你需要在叠加分割上进行两次分割（HTML代码中的第一个）使用position：absolute将它放在顶部，具有相同的宽度和高度 - 然后是图像下面的内容划分将在您的绝对定位划分下分层。

<div style="background:url(image.jpg); width:100px; height:100px">

... material here is on top of the image ...

</div>

或

<div style="position:absolute; width:100px; height:100px">
    ... material here is on top of the image ...
</div>
<div style="width:100px; height:100px">
     ... place object here which picks up your map or whatever ...
</div>

这里的......材料位于图像的顶部...可以是画布，但SVG会因为支持链接而编码较少

<div style="background:url(image.jpg); width:100px; height:100px">
<object data="yourOverlay.svg" width="100" height="100" >
</object>
</div>

以下是http://tutorials.jenkov.com/svg/a-element.html

发布的示例SVG文件

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

    <a xlink:href="/svg/index.html">
        <text x="10" y="20">/svg/index.html</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="new">
        <text x="10" y="40">/svg/index.html
         (xlink:show="new")</text>
    </a>

    <a xlink:href="/svg/index.html" xlink:show="replace">
        <text x="10" y="60">/svg/index.html
         (xlink:show="replace")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_blank">
        <text x="10" y="80">m/svg/index.html
         (target="_blank")</text>
    </a>

    <a xlink:href="/svg/index.html" target="_top">
        <text x="10" y="100">/svg/index.html
         (target="_top")</text>
    </a>

</svg>

根据您的应用程序的不同，您可能需要考虑直接HTML“...此处的材料位于图像顶部...”，因此它可以在较旧的浏览器中使用。

你和FYI可以将背景编码到SVG中，只需在html页面中有一个对象标签，然后使用googles“SVGWEB”http://code.google.com/p/svgweb/来支持几乎所有的浏览器。

Answer 2

这里的资源很好：http://dev.opera.com/articles/view/html5-canvas-painting/

但是对于你正在做的事情，你并不需要画布，imo。如果您有图像，并且知道要覆盖的内容（像素偏移），则可以将JSON或XML中每个数据点的像素偏移提供给客户端脚本，然后让它使用绝对定位把它们放在需要它们在图像上的位置。

Answer 3

另一种可能的解决方案是使用SVG图像，我相信支持直接链接

如何在图像上叠加数据

3 个答案: