พบกับแผนที่แบบใหม่ใน Google Maps Platform เร็วๆ นี้ การอัปเดตการจัดรูปแบบแผนที่นี้มีชุดสีเริ่มต้นใหม่ รวมถึงการปรับปรุงประสบการณ์และความสามารถในการใช้งานแผนที่ ระบบจะอัปเดตรูปแบบแผนที่ทั้งหมดโดยอัตโนมัติในเดือนมีนาคม 2025 หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับความพร้อมให้บริการและวิธีเลือกใช้ก่อนหน้านี้ โปรดดูรูปแบบแผนที่ใหม่สำหรับ Google Maps Platform

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

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

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

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

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

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

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

บทนำ

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

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

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

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

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

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