เครื่องหมาย

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

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

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

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

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

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

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

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

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

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

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 เพื่อให้มั่นใจว่าจะมีประสิทธิภาพสูงสุด

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

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