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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

บทนำ

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

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

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

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);

      

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)

      

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

Java


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

      

Kotlin


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

      

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

คุณนําการวางซ้อนระดับพื้นออกได้โดยใช้เมธอด GroundOverlay.remove()

Java


imageOverlay.remove();

      

Kotlin


imageOverlay?.remove()

      

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

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

Java


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

      

Kotlin


// Update the GroundOverlay with a new image of the same dimension

// 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 และความกว้างของการวางซ้อน (หน่วยเป็นเมตร) โดยค่าเริ่มต้น anchor จะอยู่กึ่งกลางของรูปภาพ คุณสามารถระบุความสูงของการวางซ้อน (หน่วยเป็นเมตร) ได้ หากคุณไม่ระบุความสูงของการวางซ้อน ก็จะคํานวณโดยอัตโนมัติเพื่อคงสัดส่วนของรูปภาพไว้

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

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);

      

Kotlin


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

      

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

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

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

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);

      

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)

      

เชื่อมโยงข้อมูลกับการวางซ้อนระดับพื้น

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

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

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");

      

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"

      

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

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

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

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

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