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

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

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

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

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

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

บทนำ

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

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

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

หมายเหตุ: เมื่อเพิ่มรูปภาพลงในแผนที่ ระบบจะแปลงรูปภาพให้มีด้านที่เป็นจำนวนเต็มยกกำลัง 2 คุณหลีกเลี่ยงการแปลงนี้ได้โดยใช้รูปภาพต้นฉบับที่มีขนาดเป็นเลขยกกำลังสอง เช่น 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-index สําหรับการวางซ้อน

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

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

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

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