Leaflet.js เป็นห้องสมุดแผนที่ที่ง่ายที่สุดที่คุณเคยพบ
Google Maps เป็นที่นิยมมากที่สุด วิดเจ็ตแผนที่แบบฝังได้ สำหรับนักออกแบบเว็บไซต์ แต่สิ่งที่เกี่ยวกับ การเพิ่มคุณสมบัติที่กำหนดเอง เช่นคำแนะนำเครื่องมือและเครื่องหมายหมุด?
ที่นี่เป็นที่ ๆ มีห้องสมุดที่ยอดเยี่ยม Leaflet.js ช่วยตัน.
มันคือ โครงการโอเพ่นซอร์สที่สมบูรณ์ฟรี เริ่มสร้างโดยหนึ่งในพวกที่ Mapbox ชื่อว่า Vladimir Agafonkin ตั้งแต่นั้นเป็นต้นมาแผ่นพับได้ขยายรวม ผู้มีส่วนร่วมหลายสิบคน รอบโลก.
บ่อยครั้ง อัปเดตพร้อมการแก้ไขข้อบกพร่องและคุณสมบัติใหม่ ที่ปรับปรุงการใช้งานโดยรวมในเว็บไซต์ใด ๆ นี่คือห้องสมุดทำแผนที่ที่ฉันชอบที่สุดเนื่องจากความแข็งแรงและความสวยงามของการออกแบบ.
มันมีคุณสมบัติมากมายที่ฉันไม่สามารถแสดงได้ทั้งหมด แต่นี่คือ สิ่งที่น่าสนใจที่สุด:
- การเร่งฮาร์ดแวร์มือถือ
- เครื่องหมายหมุด, รูปร่างซ้อนทับและเคล็ดลับเครื่องมือ
- การซูมและการแพนกล้องแบบกำหนดเอง
- ไม่มีการพึ่งพา JS
- รองรับเบราว์เซอร์ที่สำคัญทั้งหมดรวมถึง IE7+
การติดตั้งใช้งานนั้นค่อนข้างยุ่งยากเพราะคุณต้องการ ป้อนพิกัด และ กำหนดว่าแผนที่ควรมีขนาดใหญ่เพียงใด.
ผู้ใช้สามารถทำได้ตลอดเวลา ซูมออก และ เลื่อนไปรอบ ๆ, ดังนั้นมุมมองสามารถเปลี่ยนแปลงได้ตลอดเวลา แต่มันก็ขึ้นอยู่กับ คุณกำหนดแผนที่อย่างไร บนหน้า.
มีขนาดใหญ่มาก หน้าเอกสาร เต็มไปด้วยข้อมูลสำหรับทุกแง่มุมของแผ่นพับ น่าเศร้าที่ฉันไม่สามารถแนะนำให้ดำลงไปเพราะคุณอาจหลงทาง แต่ตรวจสอบ หน้าบทเรียนของแผ่นพับ ซึ่งรวมถึง คู่มือเริ่มต้นอย่างรวดเร็ว สำหรับมือใหม่.
คุณจะได้เรียนรู้วิธีการ แผนที่ฝังเปลี่ยนขนาด / ตำแหน่ง, และวิธีการ เพิ่มกราฟิกที่กำหนดเองอยู่ด้านบน, เช่นวงกลมหรือเครื่องหมายหมุด.
คู่มือแนะนำนี้สามารถ สอนทุกสิ่งที่คุณต้องการ เพื่อใช้แผ่นพับบนบล็อกเว็บไซต์ บริษัท หรือโครงการที่กำลังจะมีขึ้น.
มีเหตุผลมากมายในการใช้ Google Maps: มีประสิทธิภาพเชื่อถือได้และฟรี แต่ใบปลิวมาพร้อมกับ คุณสมบัติอื่น ๆ อีกมากมายนอกกรอบ และคุณจะต้อง เพิ่มไฟล์ CSS / JS ลงในหน้าเว็บของคุณ ที่จะเริ่มต้น. คุณสามารถหาได้ คัดลอกโฮสต์ออนไลน์ ถ้าคุณต้องการไปเส้นทาง CDN.
อย่าปล่อยให้เอกสารทำให้คุณกลัว มีหลายสิ่งที่คุณสามารถเรียนรู้ได้ ไม่จำเป็นต้องใช้คุณสมบัติทั้งหมด สำหรับการตั้งค่าแผ่นพับพื้นฐาน.
และไม่ใช้เวลามากในการ สร้างแผนที่ที่น่าตื่นตาตื่นใจตั้งแต่เริ่มต้น. ดูตัวอย่าง Codepen นี้ที่สร้างขึ้น ใช้ Leaflet.js และ Google Maps API.
