ควบคุมลักษณะการชน

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

หน้านี้แสดงวิธีตั้งค่าลักษณะการทำงานเมื่อมีการชนกันของเครื่องหมาย ลักษณะการทำงานเมื่อมีการชนกันจะควบคุมวิธีแสดงเครื่องหมายหากเครื่องหมายนั้นชนกัน (ซ้อนทับ) กับเครื่องหมายอื่น

หากต้องการตั้งค่าการดำเนินการสำหรับการซ้อนทับ ให้ตั้งค่า collisionBehavior เป็นค่าใดค่าหนึ่งต่อไปนี้

  • REQUIRED: แสดงตัวทำเครื่องหมายเสมอไม่ว่าจะมีเครื่องหมายอื่นชนกันหรือไม่
  • REQUIRED_AND_HIDES_OPTIONAL: แสดงเครื่องหมายเสมอไม่ว่าจะมีเครื่องหมายอื่นชนกันหรือไม่ และซ่อนเครื่องหมายหรือป้ายกำกับ OPTIONAL_AND_HIDES_LOWER_PRIORITY ที่จะซ้อนทับกับเครื่องหมาย
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: แสดงเครื่องหมายก็ต่อเมื่อเครื่องหมายนั้นไม่ซ้อนทับกับเครื่องหมายอื่น หากเครื่องหมาย 2 รายการประเภทนี้ซ้อนทับกัน ระบบจะแสดงเครื่องหมายที่มี zIndex สูงกว่า หากเครื่องหมายมี zIndex เท่ากัน ระบบจะแสดงเครื่องหมายที่มีตำแหน่งหน้าจอแนวตั้งต่ำกว่า

ตัวอย่างต่อไปนี้แสดงการตั้งค่าลักษณะการทำงานเมื่อมีการชนกันของเครื่องหมาย

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

ควบคุมการดำเนินการสำหรับการซ้อนทับของป้ายกำกับ

คุณสามารถควบคุมลักษณะการทำงานเมื่อมีการชนกันของหมุดและข้อความป้ายกำกับของเครื่องหมายแยกกันได้ ในบางกรณี การซ่อนป้ายกำกับในขณะที่แสดงหมุดของเครื่องหมายบนหน้าจออาจเป็นประโยชน์เพื่อรักษาบริบท หากต้องการทำเช่นนี้, เพิ่มองค์ประกอบ <gmp-label-3d> เป็น องค์ประกอบระดับเดียวกัน กับ <gmp-marker-3d> และลิงก์ องค์ประกอบทั้ง 2 โดยใช้แอตทริบิวต์ for

ตัวอย่างโค้ดต่อไปนี้แสดงการตั้งค่าการดำเนินการสำหรับการซ้อนทับสำหรับป้ายกำกับแยกจากตัวทำเครื่องหมาย

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);