ต่อจากเมื่อวาน เราได้ทำ แอป ที่ใช้ Map Activity ของ google maps API ไปเป็นที่เรียบร้อยแล้ว (ใครยังไม่ได้ทำ ไปดู ที่นี่ ) วันนี้เราจะต่อยอดสิ่งได้จากเมื่อวาน โดยการทำ ItemizedOverlay

อะไรคือ ItemizedOverlay ?

ลองดูภาพนี้ ที่เราเห็น

1. Map Activity (คือรุปแผนที่)
2. แผ่นใส่ๆ ที่ถูกว่างด้วย OverlayItem (ที่เราเห็นเป็นโลโก EWTC นะครับ)

โดยใน Map Activity หนึ่งๆ จะมีกี่ ItemizedOverlay ก็ได้ และ ในทำนองเดียวกัน ใน หนึ่ง ItemizedOverlay จะมี กี่ OverlayItem ก็ได้ ยกตัวอย่าง ใน หนึ่งแผนที่ ผมจะแบ่งกลุ่มสถานที่ เช่น โรงเรียน (ItemizedOver) , วัด (ItemizedOver) และ อีกหลายๆกลุ่ม และในกลุ่ม ItemizedOverlay จะมีรูป โรงเรียนเตรียมอุดม (OverlayItem) , โรงเรียนสวนกุหลาย (OverlayItem) เท่าไรก็ได้ เดียววันนี้เราจะมาเรียนรู้การสร้างกัน

เตรียมรูปสำหรับทำ OverlayItem

จากตัวอย่าง ผมจะทำ OverlayItem ของ สถาบัน EWTC ส่วนใหญ่จะใช้ Logo ที่เป็นไฟร์แบบ png พื้นหลังใส ขนาด 50x50 px เสร็จแล้วนำไปเก็บไว้ที่

• drawable-ldpi 0.75x
• drawable-mapi (50x50)
• drawable-hdpi 1.5x

ตรงนี้จำได้ใช่ไหมครับเรื่องที่ device android มีหลายขนาดของจอ

สร้าง Class ขึ้นมาใหม่

กลับมาที่แอป LearnGoogleMap ที่เราได้โค้ดไว้ แล้ว สร้าง Class อีกอันนึง

โดยกำหนดค่าต่างๆ ใน Class ใหม่อย่างนี้ ใน Class Name ผมให้ชื่อว่า ewtcitemizedOverlay โดยกำหนด Superclass เป็น com.google.android.maps.ItemizedOverlay<Overlayitem> และ ติกตรง Constructors from superclass

ได้คลาส ewtcitemizedOverlay.java มาก็ Error เพียบเลย แต่ เรามี eclipse คลิกไปเลยครับ

eclipse ขอ Add unimplemented method

Add constructor ตัว Drawable

และสุดท้าย Import 'OverlayItem'

คลิก 4 ทีได้โค้ดมาเพียบ ถ้าพิมพ์คงแย่ แถมบางทีผิดอีกหายาก ไม่ Error ละ

การทำ หรือ การเรียก OverlayItem ต้องมีการ ArrayList เพิ่มคำสั่งนี้ลงไป

มาเพิ่มโค้ดใน Drawable debultMarker

เพิ่มโค้ดในส่วนของ addOverlay

ในส่วนของ createItem

และ size

กลับไปที่ LearnGoogleMap.java

เพิ่มโค้ดเหล่านี้

เสร็จแล้วลองทดสอบ กับ AVD ดูก็จะได้อย่างนี้ครับ

สำหรับหลายๆ ท่านที่ไม่สามารถ ทำได้ ลองโหลด Source Code ได้จาก http://androidthai.in.th/download-code-android.html ครับ