ใช้เครื่องหมายเพื่อแสดงสถานที่แห่งเดียวบนแผนที่ คู่มือนี้จะแสดง
วิธีใช้เครื่องหมายขั้นสูง ตัวทำเครื่องหมายขั้นสูงช่วยให้คุณสร้างและปรับแต่งตัวทำเครื่องหมายที่มีประสิทธิภาพสูง และสร้างเครื่องหมายที่เข้าถึงได้ซึ่งตอบสนองต่อเหตุการณ์การคลิก DOM และการป้อนข้อมูลด้วยแป้นพิมพ์ สำหรับการปรับแต่งที่ละเอียดยิ่งขึ้น ตัวทำเครื่องหมายขั้นสูงจะรองรับการใช้ HTML และ CSS ที่กำหนดเอง รวมถึงความสามารถในการสร้างตัวทำเครื่องหมายที่กำหนดเองได้อย่างสมบูรณ์ สำหรับแอปพลิเคชัน 3 มิติ
คุณสามารถควบคุมระดับความสูงที่เครื่องหมายจะปรากฏได้
เครื่องหมายขั้นสูงได้รับการสนับสนุนทั้งในแผนที่แรสเตอร์และแผนที่เวกเตอร์ (แต่คุณลักษณะบางอย่างจะใช้ไม่ได้ในแผนที่แรสเตอร์)
คุณต้องมีรหัสแผนที่จึงจะใช้เครื่องหมายขั้นสูงได้ (ใช้ DEMO_MAP_ID ได้)
เริ่มต้นใช้งานเครื่องหมายขั้นสูง
ปรับแต่งสี สัดส่วน และรูปภาพไอคอน
ปรับแต่งพื้นหลัง รูปอักขระ และสีของเส้นขอบเริ่มต้นของเครื่องหมาย รวมถึงปรับขนาดเครื่องหมาย
แทนที่ไอคอนตัวทำเครื่องหมายเริ่มต้นด้วยรูปภาพ SVG หรือ PNG ที่กำหนดเอง
สร้างตัวทำเครื่องหมาย HTML ที่กำหนดเอง
ใช้ HTML และ CSS ที่กำหนดเองเพื่อสร้างเครื่องหมายอินเทอร์แอ็กทีฟ ที่โดดเด่นสะดุดตาและสร้างภาพเคลื่อนไหว
สร้างเครื่องหมายตอบสนองต่อเหตุการณ์การคลิกและแป้นพิมพ์
ทำให้เครื่องหมายตอบสนองต่อการคลิกและเหตุการณ์แป้นพิมพ์โดยการเพิ่ม Listener เหตุการณ์ click
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4239163, lng: -122.0947209},
zoom: 17,
mapId: 'DEMO_MAP_ID',
});
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
marker.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
ตั้งค่าระดับความสูงของเครื่องหมายและลักษณะการชน
ตั้งค่าระดับความสูงสำหรับเครื่องหมายเพื่อให้ปรากฏอย่างถูกต้องด้วยองค์ประกอบของแผนที่ 3 มิติ และระบุลักษณะการทำงานของเครื่องหมายเมื่อชนกับเครื่องหมายอื่นหรือป้ายกำกับแผนที่ ความสูงของเครื่องหมายได้รับการสนับสนุนบนแผนที่เวกเตอร์เท่านั้น
