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

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

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

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

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

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

บทนำ

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

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

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

วิธีการ

  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)
imageOverlay?.let {
    val isClickable = it.isClickable
    val isVisible = it.isVisible
    val bearing = it.bearing
    val transparency = it.transparency
    val zIndex = it.zIndex
    val position = it.position
    val width = it.width
    val height = it.height
}

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 เพื่อรอกิจกรรมกิจกรรมการคลิกในการวางซ้อนพื้นที่ที่คลิกได้ หากต้องการตั้งค่า Listener นี้บนแผนที่ ให้เรียกใช้ GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener) เมื่อผู้ใช้คลิกการวางซ้อนพื้นที่ คุณจะได้รับการเรียกกลับ onGroundOverlayClick(GroundOverlay)