13 Perpustakaan JavaScript untuk Membuat Peta Interaktif & Disesuaikan

Kami sebelum ini memaparkan Google Map Maker dan 10 alat lain untuk membantu anda membina peta. Walau bagaimanapun, jika anda lebih suka menggunakan perpustakaan Javascript, adakah kami mendapat jawatan untuk anda. Berikut adalah perpustakaan JS yang anda boleh gunakan untuk menunjukkan penanda peta khas, melukis garis laluan tersuai atau bahkan menunjukkan dialog apabila anda melayang atau klik pada titik tertentu peta.

Peribadikan peta anda dengan gaya yang anda mahu - sesetengah daripada mereka boleh ditata dengan CSS - atau menyesuaikan peta anda sebagai interaktif yang anda suka. Sumber data peta, ketergantungan dan lesen setiap perpustakaan telah disertakan untuk kemudahan anda.

Lagi mengenai Hongkiat:

• Bagaimana cara menggayakan Peta Google
• Mendapatkan lokasi pengguna dengan API Geolocation HTML5
• Visualisasi Data: 20 + alat dan sumber berguna

GMaps

GMaps membuat menambah dan menyesuaikan Peta Google dengan mudah. Selain menambah peta, anda juga boleh melakukan beberapa perkara ke dalam peta, seperti polyline yang mungkin berguna untuk melukis laluan, kawalan menu khas, dan juga elemen HTML.

GMaps adalah serasi dengan data diformat JSON yang anda boleh gunakan untuk menyepadukan peta anda dengan aplikasi tertentu, seperti Foursquare.

• Sumber Data Peta: Peta Google
• Kebergantungan: tiada
• Lesen: Lesen MIT

jHere

Pada 5KB, jHERE menunjukkan bahawa saiz itu tidak penting; anda masih boleh membina peta interaktif yang kuat dengan beberapa pilihan penyesuaian. jHERE memperoleh visualisasi peta dari peta HERE, yang merupakan salah satu penyedia peta paling popular untuk Windows Phone.

Perpustakaan ini boleh dilanjutkan dengan fungsi baru, dan terdapat beberapa sambungan yang dibangunkan untuk perpustakaan ini termasuk satu untuk menambah bentuk, laluan, dan penanda khas.

• Sumber Data Peta: DI SINI Peta
• Kebergantungan: jQuery atau ZeptoJS
• Lesen: Lesen MIT

Kartograph

Kartograph terdiri daripada dua fail, Kartograph.ph untuk menjana peta dalam format SVG, dan Kartograph.js untuk menambah elemen interaktif di atas peta. Oleh kerana Kartograph.js dibina di atas Raphael.js peta akan berfungsi dengan baik ke IE7. Anda boleh melihat demo peta interaktif untuk mengetahui apa yang boleh dilakukan oleh Kartograph.

• Sumber Data Peta: Kartograf
• Kebergantungan: Kartograph.py, Raphael, dan jQuery
• Lesen: AGPL dan LGPL

Mapael

jQuery Mapael membolehkan anda membuat peta dengan visualisasi data yang elegan serta interaktiviti. Anda boleh, sebagai contoh, membuat peta dan menetapkan setiap rantau pada peta dengan warna yang berbeza berdasarkan rantau. Anda juga boleh menambah petua alat di rantau ini, dan juga pengendali acara seperti klik atau berlegar.

Peta ini dibina dengan SEO dalam minda dengan menyediakan kandungan alternatif untuk robot enjin carian yang tidak mampu merayap kandungan yang dijana JavaScript.

• Sumber Data Peta: Raphael.js
• Kebergantungan: jQuery
• Lesen: Lesen MIT

D3js

D3.js adalah pustaka JavaScript komprehensif yang akan membawa data anda kepada kehidupan melalui HTML, SVG dan CSS. Penggunaan D3 agak berbeza termasuk untuk membina peta yang sangat interaktif. Lihat peta World Bank Global Development dan anda akan melihat kemungkinan apa yang anda boleh bina dengan D3.js.

• Sumber Data Peta: D3.js
• Kebergantungan: tiada
• Lesen: Tidak jelas

DataMaps

Jika membina peta dengan D3.js sangat hangat, anda boleh menggunakannya DataMaps. DataMaps pada dasarnya adalah plugin D3.js yang dibangunkan khusus untuk membina peta. Ia mewarisi banyak keupayaan D3.js, oleh itu anda boleh membina peta mudah atau sangat khusus dengannya. Adakah saya menyebut bahawa peta itu responsif?

• Sumber Data Peta: D3.js
• Kebergantungan: D3.js dan TopoJSON
• Lesen: Lesen MIT

GeoChart

GeoChart adalah Peta Google dipermudahkan yang menjadikan rantau, penanda dan teks, bukan peta lengkap dengan butiran kecil. Peta ini dihasilkan dalam SVG, dan boleh disesuaikan dengan banyak cara termasuk menukar warna wilayah, menambah popup, dan penanda peta tersuai.

• Sumber Data Peta: Peta Google
• Kebergantungan: tiada
• Lesen: Baca Google Maps TOS

Maplace

Maplace, plugin jQuery untuk menjana peta melalui Google Maps API v3. Maplace berfungsi dalam semua pelayar, termasuk IE6. Jadi ini adalah satu lagi plugin hebat bernilai perhatian anda jika anda mahu membina peta dengan cara yang paling mudah.

• Sumber Data Peta: Peta Google
• Kebergantungan: jQuery
• Lesen: Lesen MIT

Bersungguh-sungguh

Statik adalah pustaka JavaScript yang dibangunkan untuk menjana peta AS. Perpustakaan adalah sama dengan ringan memandangkan anda boleh menambah elemen interaktif di atas peta yang dihasilkan.

• Sumber Data Peta: Stately / SVG
• Kebergantungan: tiada
• Lesen: Lesen MIT

GeoComplete

GeoComplete adalah perpustakaan JavaScript yang berbeza dengan sendirinya. Perpustakaan akan menambah medan input bersama dengan peta, yang akan menunjukkan cadangan bandar, negara atau negeri semasa anda menaip.

• Sumber Data Peta: Peta Google
• Kebergantungan: jQuery
• Lesen: Lesen MIT

Alat Peta

Alat Peta menyediakan API intuitif untuk menambah Peta Google. Ia menyokong pemuatan data JSON yang diformat geo seperti TopoJSON dan GeoJSON untuk menjadikan peta. Di samping itu, anda boleh menambah penanda animasi yang saya rasa akan menjadikan peta itu lebih meriah, masukkan kandungan HTML dengan pembolehubah atau ruang letak ala Handslebars.

• Sumber Data Peta: Peta Google
• Kebergantungan: GeoJSON / TopoJSON
• Lesen: Lesen MIT

OpenLayers

OpenLayers adalah kerangka JavaScript sumber terbuka prestasi tinggi untuk membina peta interaktif menggunakan pelbagai perkhidmatan pemetaan. Anda boleh memilih sumber lapisan peta menggunakan lapisan ubin atau lapisan vektor dari beberapa perkhidmatan peta.

OpenLayer datang mudah alih keluar dari kotak, sesuai untuk membina peta merentas peranti dan penyemak imbas. Anda boleh menggunakan CSS untuk melihat peta anda yang berlainan. Untuk melaksanakan peta di web anda menggunakan OpenLayers, inilah tutorial yang akan membantu.

• Sumber Data Peta: OpenStreetMap
• Kebergantungan: tiada
• Lesen: Undefined

Risalah

Pemaju memberi Risalah fungsi asas berfungsi dengan sempurna, menjaga saiznya kecil, sesuai untuk peranti mudah alih. Untuk fungsi tertentu, cuma lanjutan Risalah menggunakan pemalam. Risalah mempunyai kebanyakan ciri peta dalam talian yang anda perlukan: lapisan jubin, pop timbul, penanda, dan lapisan vektor percuma seperti polylines, poligon, bulatan atau segi empat tepat. Ia dilengkapi dengan reka bentuk lalai yang bagus walaupun anda boleh menyesuaikan gaya menggunakan CSS3 dengan mudah.

Risalah mempunyai ciri interaksi penggunaan yang paling baik untuk penyemak imbas mudah alih dan desktop.

• Sumber Data Peta: OpenStreetMap
• Kebergantungan: tiada
• Lesen: Undefined