เครื่องหมาย

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

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

ความสามารถ	MarkerElement	Marker3DElement
การปรับแต่ง	สูง (รองรับองค์ประกอบ HTML ที่กำหนดเอง, Core Animation 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 เพื่อให้มั่นใจว่าแอปพลิเคชันจะมีประสิทธิภาพสูงสุด

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

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