หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

การวางซ้อนพื้นเป็นภาพซ้อนทับที่สัมพันธ์กับพิกัดละติจูด/ลองจิจูด จึงเคลื่อนที่เวลาลากหรือซูมแผนที่

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

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

GroundOverlayDemoActivity - Java: ฟีเจอร์และผู้ฟังภาคพื้นดินใน Java
GroundOverlayDemoActivity - Kotlin: ฟีเจอร์พื้นดินและผู้ฟังใน Kotlin

ข้อมูลเบื้องต้น

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

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

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

วิธีการทีละขั้นตอน:

สร้างอินสแตนซ์ออบเจ็กต์ GroundOverlayOptions ใหม่
ระบุรูปภาพเป็น BitmapDescriptor
กําหนดตําแหน่งของรูปภาพโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้
- position(LatLng location, float width, float height)
- position(LatLng location, float width)
- positionFromBounds(LatLngBounds bounds)
ตั้งค่าพร็อพเพอร์ตี้ที่ไม่บังคับ เช่น transparency ได้ตามต้องการ
โทรหา 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() จะแทนที่รูปภาพที่มีอยู่ด้วยรูปภาพอื่นที่มีขนาดเดียวกัน

กําหนดตําแหน่งภาพซ้อนทับทางพื้น

สามารถระบุตําแหน่งของภาพซ้อนทับระดับพื้นได้สองวิธี:

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

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

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

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

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