VDO บทที่ 22 – สร้างแอพแผนที่ด้วย Google Maps

(VDO นี้ไม่อัพเดตแล้ว กรุณาอ่านจาก eBook)

คุณสมบัติของแอพ

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

คอมโพเนนต์ที่กล่าวถึง

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

บล็อกที่สำคัญ

  • Enable MapClickListener หากกำหนดให้เป็น true เมื่อคลิ้กแผนที่ ก็จะเกิดอีเวนต์ OnMap Click ขึ้น
  • Enable MapLongClickListener หากกำหนดให้เป็น true เมื่อคลิ้กค้างที่แผนที่ ก็จะเกิดอีเวนต์ OnMap LongClick ขึ้น
  • Enable MyLocation หากกำหนดให้เป็น true จะทำให้ Google maps สามารถแสดงพิกัดปัจจุบันของเครื่องได้
  • Enable ZoomControl หากกำหนดให้เป็น true จะทำให้มีปุ่มซูมเข้า-ออก บนแผนที่ด้วย
  • OnMap Click เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการคลิ้กที่แผนที่ โดยจะให้ค่า latitude และ longitude ณ ตำแหน่งที่คลิ้กมาด้วย
  • OnMap LongClick เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการคลิ้กค้างที่แผนที่
  • OnLocation Changed เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการเปลี่ยนแปลงตำแหน่งพิกัดปัจจุบัน โดยในอีเวนต์นี้ จะให้ค่า latitude และ longitude ปัจจุบันมาด้วย
  • Move Map To Location ใช้สำหรับเลื่อนแผนที่ไปยังตำแหน่งพิกัดที่ระบุด้วย latitude และ longitude ใหม่ พร้อมกำหนด zoom level (มีค่า 0-22 ตามที่สอนไว้ในบทที่ 11)
  • Add Markers From JSON ใช้เพิ่ม marker ลงในแผนที่ โดยจะต้องระบุรายละเอียดต่อไปนี้ ในรูปแบบ JSON
    • lat คือ latitude
    • lng คือ longitude
    • color คือ สีของ marker ซึ่งเป็นตัวเลขตั้งแต่ 0 - 360
    • title คือ ชื่อของ marker จะแสดงเมื่อคลิ้กที่ marker
    • snippet คือ ข้อความที่เป็นรายละเอียดเพิ่มเติม
    • draggable คือ หากต้องการให้ลาก marker ได้ ให้กำหนดค่าเป็น true
  • OnMarker Click เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการคลิ้กที่ marker โดยอีเวนต์นี้จะให้ค่ากลับมา 3 ค่า คือ latitude, longitude และ markerid
  • Remove Marker ใช้ลบ marker ออกจากแผนที่ โดยจะต้องกำหนด markerid ที่ถูกต้อง
  • Add Circle ใช้เพิ่มวงกลมลงในแผนที่ โดยจะต้องกำหนดรายละเอียดต่อไปนี้
    • lat คือ latitude
    • lng คือ longitude
    • radius คือ รัศมีของวงกลม มีหน่วยเป็นเมตร
    • alpha คือ ค่าความโปร่งใส มีค่าตั้งแต่ 0 ถึง 255 โดย 0 คือ ใส และ 255 คือ ทึบ
    • hue คือ ค่าสีแบบเดียวกับการกำหนดค่าสีของ marker มีค่าสีตั้งแต่ 0 ถึง 360
    • strokeWidth ความกว้างของเส้นขอบวงกลม หน่วยเป็นพิกเซล
    • strokeColor สีของเส้นขอบวงกลม
    • draggable คือ หากต้องการให้ลาก และเปลี่ยนขนาดวงกลมได้ ให้กำหนดค่าเป็น true
  • Remove Circle ใช้ลบวงกลมออกจากแผนที่ โดยจะต้องกำหนด circleid ที่ถูกต้อง
  • split text at เป็นบล็อกคำสั่งสำหรับแยกข้อความออกเป็น 2 ส่วน โดยอาศัยเครื่องหมายที่กำหนดเป็นจุดแยกข้อความ ผลลัพธ์ที่ได้จะเป็น list ที่มีข้อมูล 2 ค่า
  • evaluate but ignore result บล็อกนี้มีไว้เพื่อให้เราสามารถนำบล็อก Remove Circle มาต่อได้เท่านั้นเอง

ความรู้อื่นๆ

  • เทคนิคในการเลื่อนแผนที่มายังตำแหน่งพิกัดปัจจุบัน ในตอนที่เริ่มเปิดแอพขึ้นมา

Comments

Popular posts from this blog

บทที่ 4 - เรียนรู้เกี่ยวกับ User Interface

บทที่ 17 – สร้างแอพ Pomodoro

บทที่ 13 – รู้จักกับ Orientation sensor