เครื่องหมาย

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

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

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

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

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