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

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《我的第一个 JavaScript Web 应用程序：交互式图像坐标查找器》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

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

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

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

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

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

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

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

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

感谢您的阅读！

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《我的第一个 JavaScript Web 应用程序：交互式图像坐标查找器》文章吧，也可关注golang学习网公众号了解相关技术文章。