ใช้เครื่องหมายเพื่อดึงดูดความสนใจของผู้ใช้ไปยังตำแหน่งบนแผนที่ คู่มือนี้จะสาธิตวิธีใช้และกำหนดค่าเครื่องหมายในแผนที่ 3 มิติ คุณสามารถควบคุมรูปร่าง ขนาด และสีของเครื่องหมายได้ นอกเหนือจากระดับความสูงที่แสดง
ใช้เครื่องหมายเพื่อแสดงสถานที่ตั้งบนแผนที่ ตัวอย่างข้างต้นแสดงเครื่องหมายเดียว แบบพื้นฐานที่ไม่มีการปรับแต่ง
ปรับแต่งสี สัดส่วน และรูปภาพไอคอน
ปรับแต่งพื้นหลัง รูปอักขระ สีเส้นขอบ และขนาดเริ่มต้นของตัวทำเครื่องหมาย
แทนที่ไอคอนตัวทำเครื่องหมายเริ่มต้นด้วยทรัพยากร SVG ที่กำหนดเอง
ตั้งค่าระดับความสูงของเครื่องหมาย
คุณสามารถตั้งค่าระดับความสูงของเครื่องหมายโดยการยื่นเครื่องหมายออกมาและตั้งค่าระดับความสูง
สร้างเครื่องหมายตอบสนองต่อเหตุการณ์การคลิกและแป้นพิมพ์
ทำให้เครื่องหมายตอบสนองต่อการคลิกและเหตุการณ์เกี่ยวกับแป้นพิมพ์ด้วยการเพิ่มตัวฟังเหตุการณ์ click
function initMap() {
const map = new Map3DElement({
center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
tilt: 67.5,
range: 45000,
mode: MapMode.HYBRID
});
const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
interactiveMarker.addEventListener('gmp-click', (event) => {
// Handle the click event.
// ...
});
}
ตั้งค่าลักษณะการชนของเครื่องหมาย
ระบุว่าเครื่องหมายควรทำงานอย่างไรเมื่อขัดกับเครื่องหมายอื่นหรือป้ายกำกับแผนที่
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});