การวางซ้อนพื้น

เลือกแพลตฟอร์ม: Android iOS JavaScript

การวางซ้อนบนพื้นคือการวางซ้อนภาพที่เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด ดังนั้นภาพจะเคลื่อนที่เมื่อคุณลากหรือซูมแผนที่

ตัวอย่างโค้ด

ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่สาธิตการวางภาพซ้อนทับบนพื้นดังนี้

• GroundOverlayDemoActivity - Java: ฟีเจอร์และ Listener ของการวางซ้อนพื้นที่ใน Java
• GroundOverlayDemoActivity - Kotlin: ฟีเจอร์การวางซ้อนพื้นที่และ Listener ใน Kotlin

บทนำ

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

เพิ่มการวางซ้อน

หากต้องการเพิ่ม GroundOverlay ให้สร้างออบเจ็กต์ GroundOverlayOptions ที่กำหนดทั้งรูปภาพและตำแหน่ง คุณสามารถระบุการตั้งค่าเพิ่มเติมที่จะส่งผลต่อตำแหน่งของรูปภาพบนแผนที่ได้ (ไม่บังคับ) เมื่อกำหนดตัวเลือกที่จำเป็นแล้ว ให้ส่งออบเจ็กต์ไปยังเมธอด GoogleMap.addGroundOverlay() เพื่อเพิ่มรูปภาพลงในแผนที่ เมธอด addGroundOverlay() จะแสดงผลออบเจ็กต์ GroundOverlay คุณควรเก็บการอ้างอิงไปยังออบเจ็กต์นี้ไว้หากต้องการแก้ไขในภายหลัง

หมายเหตุ: เมื่อเพิ่มรูปภาพลงในแผนที่ ระบบจะแปลงรูปภาพเป็นรูปภาพที่มีด้านเป็นเลขยกกำลังสอง คุณสามารถหลีกเลี่ยงการแปลงนี้ได้โดยใช้รูปภาพต้นฉบับที่มีขนาดเป็นเลขยกกำลังสอง เช่น 128x512 หรือ 1024x1024

วิธีการ

1. สร้างอินสแตนซ์ออบเจ็กต์ GroundOverlayOptions ใหม่
2. ระบุรูปภาพเป็น BitmapDescriptor
3. กำหนดตำแหน่งของรูปภาพโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
   • position(LatLng location, float width, float height)
   • position(LatLng location, float width)
   • positionFromBounds(LatLngBounds bounds)
4. ตั้งค่าพร็อพเพอร์ตี้ที่ไม่บังคับ เช่น transparency ตามต้องการ
5. เรียกใช้ GoogleMap.addGroundOverlay() เพื่อเพิ่มรูปภาพลงในแผนที่

ตัวอย่างด้านล่างแสดงวิธีเพิ่มการวางซ้อนบนพื้นดินลงในออบเจ็กต์ GoogleMap ที่มีอยู่

Kotlin

val newarkLatLng = LatLng(40.714086, -74.228697)
val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .position(newarkLatLng, 8600f, 6500f)
map.addGroundOverlay(newarkMap)

      

Java

LatLng newarkLatLng = new LatLng(40.714086, -74.228697);

GroundOverlayOptions newarkMap =
        new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
                .position(newarkLatLng, 8600f, 6500f);
map.addGroundOverlay(newarkMap);

      

หากต้องการเปลี่ยนหรือนำภาพซ้อนทับบนพื้นดินออกหลังจากเพิ่มลงในแผนที่แล้ว โปรดเก็บออบเจ็กต์ GroundOverlay ไว้ คุณสามารถแก้ไขการวางซ้อนในภายหลังได้โดยทำการเปลี่ยนแปลงออบเจ็กต์นี้

Kotlin

// Add an overlay to the map, retaining a handle to the GroundOverlay object.
val imageOverlay = map.addGroundOverlay(newarkMap)

      

Java

// Add an overlay to the map, retaining a handle to the GroundOverlay object.
GroundOverlay imageOverlay = map.addGroundOverlay(newarkMap);

      

นำการวางซ้อนออก

คุณนำภาพซ้อนทับพื้นดินออกได้ด้วยเมธอด GroundOverlay.remove()

Kotlin

imageOverlay?.remove()

      

Java

imageOverlay.remove();

      

เปลี่ยนการวางซ้อน

คุณเปลี่ยนรูปภาพการวางซ้อนบนพื้นได้หลังจากเพิ่มลงในแผนที่ด้วยเมธอด GroundOverlay.setImage(BitmapDescriptor)

Kotlin

// Update the GroundOverlay with a new image of the same dimension
imageOverlay?.setImage(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))

      

Java

// Update the GroundOverlay with a new image of the same dimension
imageOverlay.setImage(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922));

      

เมธอด setImage() จะแทนที่รูปภาพที่มีอยู่ด้วยรูปภาพอื่นที่มีขนาดเดียวกัน

วางตำแหน่งการวางซ้อนพื้นที่

การระบุตำแหน่งของภาพซ้อนทับบนพื้นทำได้ 2 วิธีดังนี้

• ใช้ LatLng เพื่อจัดกึ่งกลางการวางซ้อน และใช้ขนาดเป็นเมตรเพื่อระบุขนาดของรูปภาพ
• ใช้ LatLngBounds เพื่อระบุมุมตะวันออกเฉียงเหนือและตะวันตกเฉียงใต้ของรูปภาพ

คุณต้องระบุตำแหน่งของภาพซ้อนทับบนพื้นก่อนที่จะเพิ่มลงในแผนที่

ใช้ตำแหน่งเพื่อจัดวางรูปภาพ

เมื่อเพิ่มรูปภาพ คุณจะต้องระบุ LatLng ที่จะยึดหมุดและระบุความกว้างของการวางซ้อน (เป็นเมตร) anchor จะมีค่าเริ่มต้นเป็นกึ่งกลางของรูปภาพ คุณสามารถระบุความสูงของภาพซ้อนทับ (เป็นเมตร) ได้ (ไม่บังคับ) หากคุณไม่ได้ระบุความสูงของภาพซ้อนทับ ระบบจะคำนวณความสูงโดยอัตโนมัติเพื่อรักษาสัดส่วนของรูปภาพ

โค้ดด้านล่างจะวางรูปภาพที่ตำแหน่ง 40.714086, -74.228697 ซึ่งมีความกว้าง 8.6 กม. และสูง 6.5 กม. รูปภาพจะยึดอยู่ที่ด้านซ้ายล่าง

Kotlin

val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .anchor(0f, 1f)
    .position(LatLng(40.714086, -74.228697), 8600f, 6500f)

      

Java

GroundOverlayOptions newarkMap =
        new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
                .anchor(0, 1)
                .position(new LatLng(40.714086, -74.228697), 8600f, 6500f);

      

ใช้ LatLngBounds เพื่อกำหนดตำแหน่งรูปภาพ

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

โค้ดด้านล่างจะวางรูปภาพบนแผนที่โดยมีมุมตะวันตกเฉียงใต้ผูกกับ 40.712216,-74.22655 และมุมตะวันออกเฉียงเหนือผูกกับ 40.773941, -74.12544

Kotlin

val newarkBounds = LatLngBounds(
    LatLng(40.712216, -74.22655), // South west corner
    LatLng(40.773941, -74.12544), // North east corner
)
val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .positionFromBounds(newarkBounds)

      

Java

LatLngBounds newarkBounds =
        new LatLngBounds(
                new LatLng(40.712216, -74.22655), // South west corner
                new LatLng(40.773941, -74.12544)); // North east corner
GroundOverlayOptions newarkMap =
        new GroundOverlayOptions()
                .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
                .positionFromBounds(newarkBounds);

      

เชื่อมโยงข้อมูลกับภาพซ้อนทับบนพื้น

คุณสามารถเรียกใช้ GroundOverlay.setTag() เพื่อจัดเก็บออบเจ็กต์ข้อมูลที่กำหนดเองพร้อมภาพซ้อนทับบนพื้น และเรียกข้อมูลออบเจ็กต์โดยใช้ GroundOverlay.getTag()

ตัวอย่างโค้ดต่อไปนี้จะจัดเก็บคำอธิบายสตริงที่มีภาพซ้อนทับบนพื้นดิน

Kotlin

val sydneyGroundOverlay = map.addGroundOverlay(
    GroundOverlayOptions()
        .image(BitmapDescriptorFactory.fromResource(R.drawable.harbour_bridge))
        .position(LatLng(-33.873, 151.206), 100f)
        .clickable(true),
)
sydneyGroundOverlay?.tag = "Sydney"

      

Java

GroundOverlay sydneyGroundOverlay =
        map.addGroundOverlay(
                new GroundOverlayOptions()
                        .image(
                                BitmapDescriptorFactory.fromResource(
                                        R.drawable.harbour_bridge))
                        .position(new LatLng(-33.873, 151.206), 100)
                        .clickable(true));

sydneyGroundOverlay.setTag("Sydney");

      

ต่อไปนี้คือตัวอย่างสถานการณ์ที่การจัดเก็บและเรียกข้อมูลด้วยภาพซ้อนทับบนพื้นจะมีประโยชน์

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

จัดการเหตุการณ์การวางซ้อนบนพื้น

โดยค่าเริ่มต้น ภาพซ้อนทับบนพื้นจะคลิกไม่ได้ คุณเปิดและปิดใช้ความสามารถในการคลิกได้โดยเรียกใช้ GroundOverlay.setClickable(boolean)

ใช้ OnGroundOverlayClickListener เพื่อฟังกิจกรรมการคลิกบนภาพซ้อนทับบนพื้นดินที่คลิกได้ หากต้องการตั้งค่า Listener นี้ในแผนที่ ให้เรียกใช้ GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener) เมื่อผู้ใช้คลิกภาพซ้อนทับพื้น คุณจะได้รับ Callback onGroundOverlayClick(GroundOverlay)

หมายเหตุ: หากมีการวางซ้อนภาพซ้อนทับหรือรูปร่าง (เครื่องหมาย, เส้นประกอบ, รูปหลายเหลี่ยม, วงกลม และ/หรือภาพซ้อนทับบนพื้น) หลายรายการซ้อนทับกัน กิจกรรมการคลิกจะวนผ่านกลุ่มเครื่องหมายก่อน จากนั้นจึงทริกเกอร์ภาพซ้อนทับหรือรูปร่างอื่นๆ ที่คลิกได้ตามค่าดัชนีลำดับ Z ระบบจะเรียกให้แสดงเหตุการณ์ได้สูงสุด 1 รายการต่อการคลิก กล่าวคือ ระบบจะไม่ส่งต่อการคลิกไปยังการวางซ้อนหรือรูปร่างที่มีค่าดัชนีลำดับ Z ต่ำกว่า อ่านเพิ่มเติมเกี่ยวกับดัชนีลำดับ Z ของเครื่องหมายและกิจกรรมการคลิก