Apl Web JavaScript Pertama Saya: Pencari Koordinat Imej Interaktif

Selepas menamatkan kursus JavaScript pertama saya di Full Sail University, saya tidak sabar-sabar untuk menyelami projek yang akan menguji kemahiran baharu saya. Matlamat saya adalah untuk mencipta sesuatu yang berfungsi, intuitif dan praktikal. Ini membawa kepada pembangunan aplikasi web JavaScript pertama saya: Pencari Koordinat Imej Interaktif.

Apl ini membolehkan pengguna memuat naik imej peta, klik untuk merakam koordinat dan menyimpannya sebagai lapisan dengan nama unik dan URL pilihan. Dengan alat ini, sesiapa sahaja boleh memetakan atau menganotasi imej tersuai, menjadikannya amat berguna untuk projek visual yang melibatkan mengenal pasti kawasan atau tanda tempat tertentu pada halaman web. Dalam siaran ini, saya akan membimbing anda melalui ciri, persediaan dan penggunaan apl.

Sebelum kita bermula, saya rasa ini kaveat penting bahawa ini juga merupakan projek kerja. Di tempat perniagaan saya, kami bekerja pada rangkaian tertutup bermakna saya tidak dapat menggunakan API atau perpustakaan lain jadi projek ini mungkin sedang mencipta semula roda atau mengambil pendekatan lama yang telah dipertingkatkan oleh pembangun yang lebih moden dan maju. Saya tidak sabar untuk sampai ke sana sendiri, buat masa ini mari kita ke sana!

Selepas itu, kami mempunyai halaman web ringkas yang memaparkan peta timur tengah.

Saya terfikir, macam mana kita boleh jadikan ini berguna..ish? Mungkin beberapa interaksi mudah.. Tetapi bagaimana? Selepas beberapa jam mencari google, pen kod, dan beberapa laman web lain, saya menyedari kaedah tahap rendah adalah menggunakan koordinat pada imej. Bagaimana saya mencari mereka? google menghantar saya melukis yang membuatkan saya bertelapak tangan di tengah-tengah pejabat yang sunyi. Jadi saya memutuskan untuk mencipta alat yang boleh membantu saya mendapatkannya.

Saya mahu membuat UI yang sangat mudah yang memfokuskan pada utiliti. Aplikasi ini akan membolehkan pengguna menyemak imbas imej kemudian memaparkannya pada skrin. Pengguna digesa untuk Nama Lapisan dan pautan pilihan. Mereka kemudian mengklik kotak sempadan di sekitar kawasan imej yang mereka mahu sasarkan, dalam contoh yang saya pilih Mesir.

Sebaik sahaja pengguna mengklik simpan, hasilnya akan berada di bawah dalam Log Lapisan di mana pengguna boleh menyalin hanya koordinat, menyalin baris kod yang berfungsi dengan halaman ujian yang dipautkan ke repo GitHub, Edit lapisan, atau padamkan semua lapisan.

Hasil akhir untuk demo ialah peta timur tengah di mana pengguna boleh mengklik pada negara dan melawat halaman Wikipedianya! Saya mempunyai banyak kes penggunaan lain yang saya ingin cuba dengan alat itu.

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Apl Web JavaScript Pertama Saya: Pencari Koordinat Imej Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!