13 ไลบรารี JavaScript เพื่อสร้างแผนที่แบบโต้ตอบและกำหนดเอง

ก่อนหน้านี้เราได้แนะนำ Google Map Maker และเครื่องมืออื่น ๆ 10 รายการเพื่อช่วยคุณสร้างแผนที่ อย่างไรก็ตามหากคุณต้องการใช้ห้องสมุด Javascript แทนเราได้รับโพสต์ให้คุณแล้ว นี่คือไลบรารี JS ที่คุณสามารถใช้เพื่อแสดงเครื่องหมายแผนที่พิเศษวาดเส้นเส้นทางที่กำหนดเองหรือแม้กระทั่งแสดงกล่องโต้ตอบเมื่อคุณเลื่อนหรือคลิกที่จุดใดจุดหนึ่งของแผนที่.

ปรับแต่งแผนที่ในแบบของคุณในแบบที่คุณต้องการซึ่งบางแผนที่สามารถปรับแต่งเป็น CSS ได้ กำหนดแผนที่ของคุณให้เป็นแบบโต้ตอบตามที่คุณต้องการ. แหล่งที่มาของข้อมูลแผนที่การขึ้นต่อกันและใบอนุญาตของแต่ละไลบรารีนั้นถูกรวมไว้เพื่อความสะดวกของคุณ.

เพิ่มเติมเกี่ยวกับ Hongkiat:

• วิธีจัดรูปแบบของ Google Maps
• การรับตำแหน่งของผู้ใช้ด้วย HTML5 Geolocation API
• การแสดงข้อมูล: เครื่องมือและแหล่งข้อมูลที่มีประโยชน์มากกว่า 20 รายการ

GMaps

GMaps ทำให้การเพิ่มและปรับแต่ง Google แผนที่เป็นเรื่องง่าย นอกเหนือจากการเพิ่มแผนที่คุณยังสามารถนำสิ่งต่าง ๆ ลงในแผนที่เช่น polylines ซึ่งอาจมีประโยชน์สำหรับการวาดเส้นทางการควบคุมเมนูพิเศษและองค์ประกอบ HTML.

GMaps เข้ากันได้กับข้อมูลที่จัดรูปแบบ JSON ซึ่งคุณสามารถใช้เพื่อรวมแผนที่ของคุณเข้ากับแอพเฉพาะเช่น Foursquare.

• แหล่งข้อมูลแผนที่: Google Maps
• การอ้างอิง: ไม่มี
• การอนุญาต: ใบอนุญาต MIT

jHere

ที่ 5KB jHERE จะแสดงขนาดนั้นไม่สำคัญ คุณยังสามารถสร้างแผนที่เชิงโต้ตอบที่ทรงพลังพร้อมตัวเลือกการปรับแต่งมากมาย jHERE มาจากการสร้างภาพแผนที่จากแผนที่ HERE ซึ่งเป็นหนึ่งในผู้ให้บริการแผนที่ยอดนิยมสำหรับ Windows Phone.

ไลบรารีสามารถขยายได้ด้วยฟังก์ชันการทำงานใหม่และมีส่วนขยายที่ได้รับการพัฒนาสำหรับไลบรารีนี้รวมถึงส่วนขยายสำหรับการเพิ่มรูปร่างเส้นทางและเครื่องหมายที่กำหนดเอง.

• แหล่งข้อมูลแผนที่แผนที่ที่นี่
• การอ้างอิง: jQuery หรือ ZeptoJS
• การอนุญาต: ใบอนุญาต MIT

Kartograph

Kartograph ประกอบด้วยสองไฟล์คือ Kartograph.ph เพื่อสร้างแผนที่ในรูปแบบ SVG และ Kartograph.js เพื่อเพิ่มองค์ประกอบแบบโต้ตอบที่ด้านบนของแผนที่ เนื่องจาก Kartograph.js ถูกสร้างขึ้นบน Raphael.js แผนที่จะใช้งานได้ดีกับ IE7 คุณสามารถดูการสาธิตแผนที่แบบอินเทอร์แอคทีฟเพื่อค้นหาว่า Kartograph สามารถทำอะไรได้บ้าง.

• แหล่งข้อมูลแผนที่: Kartograph
• การอ้างอิง: Kartograph.py, Raphael และ jQuery
• การอนุญาต: AGPL และ LGPL

Mapael

jQuery Mapael ช่วยให้คุณสร้างแผนที่ที่มีการสร้างภาพข้อมูลที่สวยงามเช่นเดียวกับการโต้ตอบ ตัวอย่างเช่นคุณสามารถสร้างแผนที่และกำหนดแต่ละภูมิภาคบนแผนที่ที่มีสีแตกต่างกันไปตามภูมิภาค นอกจากนี้คุณยังสามารถเพิ่มคำแนะนำเครื่องมือในพื้นที่รวมถึงตัวจัดการเหตุการณ์เช่น คลิก หรือ โฉบ.

แผนที่สร้างขึ้นโดยคำนึงถึง SEO โดยการให้เนื้อหาทางเลือกสำหรับโรบอตของเครื่องมือค้นหาที่ไม่สามารถรวบรวมข้อมูลเนื้อหาที่สร้างจาก JavaScript.

• แหล่งข้อมูลแผนที่: Raphael.js
• การอ้างอิง: jQuery
• การอนุญาต: ใบอนุญาต MIT

D3js

D3.js เป็นห้องสมุด JavaScript ที่ครอบคลุมซึ่งจะทำให้ข้อมูลของคุณมีชีวิตชีวาด้วย HTML, SVG และ CSS การใช้ D3 นั้นค่อนข้างหลากหลายรวมถึงการสร้างแผนที่ที่มีการโต้ตอบสูง ดูแผนที่โลกของธนาคารโลกการพัฒนาทั่วโลกและคุณจะเห็นความเป็นไปได้ของสิ่งที่คุณสามารถสร้างด้วย D3.js.

• แหล่งข้อมูลแผนที่: D3.js
• การอ้างอิง: ไม่มี
• การอนุญาต: ไม่ได้กำหนด

DataMaps

หากการสร้างแผนที่ด้วย D3.js นั้นมีมากมายคุณสามารถใช้ DataMaps. DataMaps เป็นปลั๊กอินของ D3.js ที่พัฒนาขึ้นเป็นพิเศษเพื่อสร้างแผนที่ มันสืบทอดความสามารถมากมายของ D3.js ดังนั้นคุณสามารถสร้างแผนที่ที่เรียบง่ายหรือปรับแต่งเองได้ ฉันพูดถึงว่าแผนที่ตอบสนอง?

• แหล่งข้อมูลแผนที่: D3.js
• การอ้างอิง: D3.js และ TopoJSON
• การอนุญาต: ใบอนุญาต MIT

GeoChart

GeoChart เป็น Google แผนที่แบบง่ายที่แสดงภูมิภาคเครื่องหมายและข้อความแทนที่จะเป็นแผนที่แบบเต็มที่มีรายละเอียดเล็กน้อย แผนที่ถูกสร้างขึ้นใน SVG และสามารถปรับแต่งได้หลายวิธีรวมถึงการเปลี่ยนสีของพื้นที่เพิ่มป๊อปอัพและเครื่องหมายแผนที่ที่กำหนดเอง.

• แหล่งข้อมูลแผนที่: Google Maps
• การอ้างอิง: ไม่มี
• การอนุญาต: อ่าน Google Maps TOS

Maplace

Maplace, ปลั๊กอิน jQuery สำหรับสร้างแผนที่ผ่าน Google Maps API v3 Maplace ทำงานได้ในทุกเบราว์เซอร์รวมถึง IE6 ดังนั้นนี่เป็นอีกหนึ่งปลั๊กอินที่น่าสนใจหากคุณต้องการสร้างแผนที่ในวิธีที่ง่ายที่สุดเท่าที่จะเป็นไปได้.

• แหล่งข้อมูลแผนที่: Google Maps
• การอ้างอิง: jQuery
• การอนุญาต: ใบอนุญาต MIT

โอฬาร

โอฬารเป็นห้องสมุด JavaScript ที่พัฒนาขึ้นเพื่อสร้างแผนที่ของสหรัฐอเมริกา ห้องสมุดมีน้ำหนักเบามากเมื่อเทียบกับการพิจารณาว่าคุณสามารถเพิ่มองค์ประกอบแบบอินเทอร์แอคทีฟที่ด้านบนของแผนที่ที่สร้างขึ้น.

• แหล่งข้อมูลแผนที่: โอฬาร / SVG
• การอ้างอิง: ไม่มี
• การอนุญาต: ใบอนุญาต MIT

GeoComplete

GeoComplete เป็นห้องสมุด JavaScript ที่แตกต่างกันในตัวมันเอง ห้องสมุดจะเพิ่มช่องป้อนข้อมูลพร้อมกับแผนที่ซึ่งจะแสดงคำแนะนำของเมืองประเทศหรือรัฐในขณะที่คุณพิมพ์.

• แหล่งข้อมูลแผนที่: Google Maps
• การอ้างอิง: jQuery
• การอนุญาต: ใบอนุญาต MIT

เครื่องมือแผนที่

เครื่องมือแผนที่มี API ที่ใช้งานง่ายเพื่อเพิ่ม Google Maps รองรับการโหลดข้อมูล JSON ที่จัดรูปแบบทางภูมิศาสตร์เช่น TopoJSON และ GeoJSON เพื่อแสดงแผนที่ ยิ่งไปกว่านั้นคุณสามารถเพิ่มเครื่องหมายภาพเคลื่อนไหวที่ฉันคิดว่าจะทำให้แผนที่มีชีวิตชีวายิ่งขึ้นแทรกเนื้อหา HTML ด้วยตัวแปรหรือตัวยึดแทน ala Handlebars.

• แหล่งข้อมูลแผนที่: Google Maps
• การอ้างอิง: GeoJSON / TopoJSON
• การอนุญาต: ใบอนุญาต MIT

OpenLayers

OpenLayers เป็นเฟรมเวิร์ก JavaScript โอเพ่นซอร์สที่มีประสิทธิภาพสูงในการสร้างแผนที่เชิงโต้ตอบโดยใช้บริการการทำแผนที่ต่างๆ คุณสามารถเลือกที่มาของเลเยอร์แผนที่โดยใช้เลเยอร์แบบเรียงต่อกันหรือเลเยอร์เวกเตอร์จากบริการแผนที่จำนวนมาก.

OpenLayer มาพร้อมกับอุปกรณ์พกพาเหมาะสำหรับการสร้างแผนที่บนอุปกรณ์และเบราว์เซอร์ คุณสามารถใช้ CSS เพื่อเปลี่ยนรูปลักษณ์แผนที่ของคุณ หากต้องการใช้แผนที่ในเว็บของคุณโดยใช้ OpenLayers ต่อไปนี้เป็นบทแนะนำที่จะช่วยคุณ.

• แหล่งข้อมูลแผนที่: OpenStreetMap
• การอ้างอิง: ไม่มี
• การอนุญาต: ไม่ได้กำหนด

ใบปลิว

นักพัฒนาให้ ใบปลิว ฟังก์ชั่นพื้นฐานในการทำงานอย่างสมบูรณ์แบบทำให้ขนาดเล็กเหมาะสำหรับอุปกรณ์มือถือ สำหรับฟังก์ชั่นเฉพาะเพียงแค่ขยาย Leaflet โดยใช้ปลั๊กอิน Leaflet มีคุณสมบัติแผนที่ออนไลน์ส่วนใหญ่ที่คุณต้องการ: เลเยอร์ไทล์, ป๊อปอัพ, เครื่องหมายและเลเยอร์เวกเตอร์ฟรีเช่นโพลีน, รูปหลายเหลี่ยม, วงกลมหรือสี่เหลี่ยม มันมาพร้อมกับการออกแบบเริ่มต้นที่ดีแม้ว่าคุณจะสามารถปรับแต่งสไตล์โดยใช้ CSS3 ได้อย่างง่ายดาย.

Leaflet มีคุณสมบัติการโต้ตอบการใช้งานมากที่สุดสำหรับเบราว์เซอร์มือถือและเดสก์ท็อป.

• แหล่งข้อมูลแผนที่: OpenStreetMap
• การอ้างอิง: ไม่มี
• การอนุญาต: ไม่ได้กำหนด