我的第一個 JavaScript Web 應用程式：互動式圖像座標查找器

在福賽大學完成我的第一門 JavaScript 課程後，我渴望投入一個可以測試我的新技能的專案。我的目標是創造一些功能性、直覺且實用的東西。這導致了我的第一個 JavaScript Web 應用程式的開發：互動式圖像座標查找器。

該應用程式允許使用者上傳地圖影像，按一下以記錄座標，並將其儲存為具有唯一名稱和可選 URL 的圖層。使用此工具，任何人都可以映射或註釋自訂圖像，這對於涉及識別網頁上特定區域或地標的視覺項目特別方便。在這篇文章中，我將引導您了解該應用程式的功能、設定和使用。

在我們開始之前，我認為一個重要的警告是，這也是一個工作項目。在我的工作地點，我們在封閉的網路上工作，這意味著我無法使用 API 或其他庫，因此該專案可能會重新創建輪子或採用更現代和高級的開發人員改進的舊方法。我迫不及待地想親自去那裡，現在讓我們開始吧！

首先我們有一個簡單的網頁，顯示中東地圖。

我心想，我們怎麼能讓它變得有用……呢？也許一些簡單的互動......但是如何呢？經過幾個小時的Google、code pen 和其他一些網站的搜尋後，我意識到一個低階方法是使用圖像上的座標。我如何找到他們？谷歌派我去畫畫，這讓我在一個安靜的辦公室中間面對手掌。所以我決定創建一個可以幫助我抓住它們的工具。

我想製作一個非常簡單、注重實用性的 UI。該應用程式將允許用戶瀏覽圖像然後將其顯示在螢幕上。系統會提示使用者輸入層名稱和可選連結。然後，他們點擊要定位的圖像區域周圍的邊界框，在範例中我選擇了埃及。

使用者點擊儲存後，結果將顯示在圖層日誌中，使用者可以在其中僅複製座標，複製與連結到GitHub 儲存庫的測試頁面配合使用的一行程式碼，編輯圖層，或將圖層全部刪除。

演示的最終結果是一張中東地圖，用戶可以點擊一個國家並訪問其維基百科頁面！我還有很多其他用例想要使用該工具進行嘗試。

感謝您的閱讀！

以上是我的第一個 JavaScript Web 應用程式：互動式圖像座標查找器的詳細內容。更多資訊請關注PHP中文網其他相關文章！