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

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

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

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

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

บทนำ

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

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

หากต้องการเพิ่ม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)

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 เพื่อระบุมุมตะวันออกเฉียงเหนือและมุมตะวันตกเฉียงใต้ของ รูปภาพ

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

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

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