เครื่องหมาย

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

แผนที่ 3 มิติใน Maps JavaScript มีคลาสตัวทำเครื่องหมาย 2 คลาสที่แตกต่างกัน ซึ่งแต่ละคลาสได้รับการเพิ่มประสิทธิภาพสำหรับการใช้งานที่เฉพาะเจาะจง ตารางต่อไปนี้แสดงความแตกต่างและข้อแลกเปลี่ยนระหว่างคลาสที่มีอยู่ 2 คลาส

ความสามารถ	MarkerElement	Marker3DElement
การปรับแต่ง	สูง (รองรับองค์ประกอบ HTML ที่กำหนดเอง, API ภาพเคลื่อนไหวหลัก ฯลฯ)	ต่ำ (ปรับแต่งได้น้อยกว่า)
ประสิทธิภาพ	ประสิทธิภาพการโต้ตอบต่ำ (FPS ลดลงเมื่อมีเครื่องหมายจำนวนมาก)	ประสิทธิภาพการโต้ตอบที่สูงขึ้น (เพิ่มประสิทธิภาพสำหรับการแสดงผลชุดข้อมูลขนาดใหญ่)
ความจุที่แนะนำ	ประสิทธิภาพการโต้ตอบที่เชื่อถือได้โดยมีเครื่องหมายสูงสุดประมาณ 1,000 รายการ	แนะนำสำหรับการจัดการเครื่องหมายมากกว่า 1,000 รายการ

ปรับแต่งสี ขนาด และรูปภาพไอคอน

ปรับแต่งพื้นหลัง กลีฟ สีขอบ และขนาดของเครื่องหมายเริ่มต้น

แทนที่ไอคอนตัวทำเครื่องหมายเริ่มต้นด้วยทรัพยากร SVG ที่กำหนดเอง

ตั้งค่าระดับความสูงของตัวทำเครื่องหมาย

คุณตั้งค่าระดับความสูงของเครื่องหมายได้โดยการดึงเครื่องหมายออกมาและตั้งค่าระดับความสูง

ทำให้เครื่องหมายตอบสนองต่อเหตุการณ์การคลิกและแป้นพิมพ์

ทำให้ตัวทำเครื่องหมายตอบสนองต่อการคลิกและเหตุการณ์ของแป้นพิมพ์โดยการเพิ่มclick Listener เหตุการณ์

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});
index.js

ตั้งค่าลักษณะการทำงานเมื่อเครื่องหมายทับซ้อนกัน

ระบุลักษณะการทำงานของเครื่องหมายเมื่อชนกับเครื่องหมายอื่นหรือป้ายกำกับแผนที่

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

ประสิทธิภาพของตัวทำเครื่องหมาย

เครื่องหมาย HTML ที่กำหนดเอง (MarkerElement) มีประสิทธิภาพต่ำกว่าเครื่องหมาย 3 มิติมาตรฐาน (Marker3DElement) สำหรับแอปพลิเคชันที่มีเครื่องหมายมากกว่า 1,000 รายการ เราขอแนะนำให้ใช้คลาส Marker3dElement เพื่อให้มั่นใจว่าจะมีประสิทธิภาพสูงสุด

ขั้นตอนถัดไป

• เพิ่มเครื่องหมาย