Dynamic Post-its ภายใน Google Maps API สำหรับ React

ฉันไม่แน่ใจว่าจะทำอย่างไรสำหรับโครงการส่วนตัวครั้งต่อไปของฉัน แต่ฉันรู้ว่าฉันต้องการผสานรวม API ที่มีประสิทธิภาพและเต็มไปด้วยคุณสมบัติ ฉันไปกับ Google Maps

เนื่องจากมีการใช้กันอย่างแพร่หลาย จึงมีเอกสารและบทช่วยสอนมากมาย ทั้งจาก Google และจากโปรแกรมเมอร์รุ่นเยาว์และรุ่นอาวุโสจำนวนมากที่ใช้บริการ

ฉันเคยทำงานกับ YouTube Data API ในโครงการก่อนหน้านี้ ดังนั้นฉันจึงได้ตั้งค่าคอนโซลของนักพัฒนาแล้ว และคุ้นเคยกับการลงทะเบียนและกระบวนการในการรับคีย์ API ขั้นตอนเหล่านี้ค่อนข้างง่าย

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

ไซต์นี้เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับโครงการ React ตราบเท่าที่มีการติดตั้งและใช้งานส่วนประกอบ Maps เมื่อคุณติดตั้ง @react-google-maps/api แล้ว สิ่งที่คุณต้องทำเพื่อเพิ่มแผนที่พื้นฐานคือส่วนประกอบ LoadScript และ GoogleMap สำหรับการโหลดและแสดงแผนที่ตามลำดับ

มันง่ายอย่างนี้ คุณจะเห็นว่ามีเพียงข้อกำหนดเล็กน้อยที่เพิ่มเข้ามาที่นี่เพื่อปรับแต่งรูปลักษณ์เริ่มต้น

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

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

นี่คือส่วนแผนที่ของ BaseMapContainer ของฉัน:

ฉันจะไม่ลงรายละเอียดทุกอย่างที่นี่ แต่รหัสด้านบนระบุรูปลักษณ์เริ่มต้นของแผนที่ของฉัน— ฉันมีพิกัดของ Columbus Circle ในนิวยอร์กซิตี้เป็นศูนย์กลางของฉัน — และสร้างฟังก์ชันสำหรับผู้ใช้เพื่อวางเครื่องหมายแล้วดำเนินการ กับพวกเขา

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

ขออภัยสำหรับการจัดสไตล์ที่ไม่เหมาะสม แต่นี่คือฟีเจอร์บันทึกย่อแบบโพสต์อิทที่ใช้งานได้ง่าย

สำหรับทุกคนที่ต้องการเล่นเกม API หรือต้องการทดลองในระบบที่เต็มไปด้วยคุณลักษณะ Google Maps API เป็นสถานที่ที่ดีในการเปลี่ยน