我的第一个 JavaScript Web 应用程序：交互式图像坐标查找器

在福赛大学完成我的第一门 JavaScript 课程后，我渴望投入到一个可以测试我的新技能的项目中。我的目标是创造一些功能性、直观且实用的东西。这导致了我的第一个 JavaScript Web 应用程序的开发：交互式图像坐标查找器。

该应用程序允许用户上传地图图像，单击以记录坐标，并将其保存为具有唯一名称和可选 URL 的图层。使用此工具，任何人都可以映射或注释自定义图像，这对于涉及识别网页上特定区域或地标的视觉项目特别方便。在这篇文章中，我将引导您了解该应用程序的功能、设置和使用。

在我们开始之前，我认为一个重要的警告是，这也是一个工作项目。在我的工作地点，我们在封闭的网络上工作，这意味着我无法使用 API 或其他库，因此该项目可能会重新创建轮子或采用更现代和高级的开发人员改进的旧方法。我迫不及待地想亲自去那里，现在让我们开始吧！

首先我们有一个简单的网页，显示中东地图。

我心想，我们怎样才能让它变得有用……呢？也许一些简单的互动......但是如何呢？经过几个小时的谷歌、code pen 和其他一些网站的搜索后，我意识到一个低级方法是使用图像上的坐标。我如何找到他们？谷歌派我去画画，这让我在一个安静的办公室中间面对手掌。所以我决定创建一个可以帮助我抓住它们的工具。

我想制作一个非常简单、注重实用性的 UI。该应用程序将允许用户浏览图像然后将其显示在屏幕上。系统会提示用户输入层名称和可选链接。然后，他们单击要定位的图像区域周围的边界框，在示例中我选择了埃及。

用户单击保存后，结果将显示在图层日志中，用户可以在其中仅复制坐标，复制与链接到 GitHub 存储库的测试页面配合使用的一行代码，编辑图层，或者将图层全部删除。

演示的最终结果是一张中东地图，用户可以单击一个国家并访问其维基百科页面！我还有很多其他用例想要使用该工具进行尝试。

感谢您的阅读！

以上是我的第一个 JavaScript Web 应用程序：交互式图像坐标查找器的详细内容。更多信息请关注PHP中文网其他相关文章！