在图像上标记位置和路线

时间:2014-03-27 09:29:05

标签: javascript html5

我正在开发一种新的寻路软件。我想让用户选择背景图像,概述游乐园,办公设施等。然后让用户在图像上选择许多重要点。例如。 "你在这里"点"监视"包含探路者地图(这将最终改变并且更加动态)。

所以这笔交易是:

1:需要基于网络 2:让管理员在图像上选择一个点 3:让管理员在图像上绘制出一系列目的地(点) 4:布局/绘制源点和终点之间的线。

如何在HTML5中选择/点击图片上的某个点并获取该点的坐标(x,y)? (我想我可以使用相同的技术绘制/绘制图像上的路线。

赞赏所有输入,

/布赖恩

1 个答案:

答案 0 :(得分:0)

您正在寻找<canvas style="background-image:url(map.jpg)" id="map">标记。然后,您可以使用context = document.getElementById('map').getContext("2d");创建contextcontext具有线条绘制功能。

您可以通过onlickonmousedownonmouseup事件获取x,y坐标。