Meine erste JavaScript-Webanwendung: Interaktiver Bildkoordinatenfinder

Nachdem ich meinen ersten JavaScript-Kurs an der Full Sail University abgeschlossen hatte, wollte ich unbedingt in ein Projekt eintauchen, das meine neuen Fähigkeiten auf die Probe stellen würde. Mein Ziel war es, etwas Funktionales, Intuitives und Praktisches zu schaffen. Dies führte zur Entwicklung meiner ersten JavaScript-Webanwendung: dem Interactive Image Coordinate Finder.

Mit der App können Benutzer ein Kartenbild hochladen, per Mausklick Koordinaten aufzeichnen und diese als Ebenen mit eindeutigen Namen und optionalen URLs speichern. Mit diesem Tool kann jeder benutzerdefinierte Bilder kartieren oder mit Anmerkungen versehen, was es besonders praktisch für visuelle Projekte macht, bei denen es darum geht, bestimmte Regionen oder Sehenswürdigkeiten auf einer Webseite zu identifizieren. In diesem Beitrag werde ich Sie durch die Funktionen, die Einrichtung und die Verwendung der App führen.

Bevor wir beginnen, denke ich, dass es ein wichtiger Vorbehalt ist, dass dies auch ein Arbeitsprojekt war. An meinem Geschäftssitz arbeiten wir in geschlossenen Netzwerken, was bedeutet, dass ich keine APIs oder andere Bibliotheken verwenden kann, sodass dieses Projekt möglicherweise das Rad neu erschafft oder einen alten Ansatz verfolgt, den modernere und fortgeschrittenere Entwickler verbessert haben. Ich kann es kaum erwarten, selbst dort anzukommen, jetzt lasst uns loslegen!

Zu Beginn haben wir eine einfache Webseite, die eine Karte des Nahen Ostens anzeigt.

Ich dachte mir, wie können wir das nützlich machen? Vielleicht ein paar einfache Interaktionen. Aber wie? Nachdem ich ein paar Stunden lang Google, Code Pen und einige andere Websites durchsucht hatte, wurde mir klar, dass eine einfache Methode darin besteht, Koordinaten auf dem Bild zu verwenden. Wie finde ich sie? Google schickte mich zum Malen, was dazu führte, dass ich mitten in einem ruhigen Büro mit der Handfläche zu Gesicht bekam. Deshalb habe ich beschlossen, ein Tool zu entwickeln, das mir dabei helfen kann, sie zu ergreifen.

Ich wollte eine sehr einfache Benutzeroberfläche erstellen, die sich auf den Nutzen konzentriert. Mit der App können Benutzer nach einem Bild suchen und es dann auf dem Bildschirm anzeigen. Der Benutzer wird zur Eingabe eines Layernamens und eines optionalen Links aufgefordert. Anschließend klicken sie auf einen Begrenzungsrahmen um den Bereich des Bildes, auf den sie abzielen möchten. In dem Beispiel habe ich Ägypten ausgewählt.

Sobald der Benutzer auf „Speichern“ klickt, werden die Ergebnisse unten im Ebenenprotokoll angezeigt, wo der Benutzer nur die Koordinaten kopieren, eine Codezeile kopieren kann, die mit der mit dem GitHub-Repo verknüpften Testseite funktioniert, die Ebene bearbeiten kann, oder löschen Sie die gesamte Ebene.

Das Endergebnis der Demo ist eine Karte des Nahen Ostens, auf der der Benutzer auf ein Land klicken und dessen Wikipedia-Seite besuchen kann! Ich habe viele andere Anwendungsfälle, die ich gerne mit dem Tool ausprobieren würde.

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonMeine erste JavaScript-Webanwendung: Interaktiver Bildkoordinatenfinder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!