ภาพรวม

ด้วยเครื่องหมายขั้นสูง คุณจะสามารถสร้างและปรับแต่งเครื่องหมาย ที่มีประสิทธิภาพสูงได้ ปรับแต่งพื้นหลังของเครื่องหมายเริ่มต้น เส้นขอบ และสีของอักษร ปรับขนาดเครื่องหมาย และแทนที่ไอคอนเครื่องหมายเริ่มต้นด้วยภาพกราฟิกที่กําหนดเอง คุณสามารถสร้างตัวทําเครื่องหมายที่เข้าถึงได้ซึ่งตอบสนองต่อเหตุการณ์การคลิก DOM และการป้อนข้อมูลด้วยแป้นพิมพ์ สําหรับการปรับแต่งที่ละเอียดยิ่งขึ้น ตัวทําเครื่องหมายขั้นสูง สนับสนุนการใช้ HTML และ CSS ที่กําหนดเอง รวมถึงความสามารถในการสร้างตัวทําเครื่องหมายที่กําหนดเองโดยสมบูรณ์ สําหรับแอปพลิเคชัน 3 มิติ คุณสามารถควบคุมระดับความสูงที่เครื่องหมายจะปรากฏ สนับสนุนเครื่องหมายขั้นสูงทั้งบนแผนที่แรสเตอร์และเวกเตอร์ (ต้องใช้รหัสแผนที่)

เริ่มต้นใช้งานเครื่องหมายขั้นสูง

ปรับแต่งสี สัดส่วน และรูปไอคอน

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

ภาพหน้าจอแสดงเครื่องหมายที่กําหนดเอง

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

ภาพหน้าจอแสดงเครื่องหมาย SVG ที่กําหนดเอง

สร้างเครื่องหมาย HTML ที่กําหนดเอง

ใช้ HTML และ CSS ที่กําหนดเองเพื่อสร้างตัวทําเครื่องหมายเชิงโต้ตอบที่โดดเด่นด้วยภาพ และสร้างภาพเคลื่อนไหว

ภาพหน้าจอแสดงตัวทําเครื่องหมาย HTML ที่กําหนดเอง

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

ตัวทําเครื่องหมายจะตอบสนองต่อการคลิกและเหตุการณ์แป้นพิมพ์โดยการเพิ่ม 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 มิติ และระบุลักษณะการทํางานของเครื่องหมายเมื่อตรงกับเครื่องหมายหรือป้ายกํากับแผนที่อื่น ระดับความสูงของเครื่องหมายสนับสนุนเท่านั้นบนแผนที่เวกเตอร์

ภาพหน้าจอแสดงเครื่องหมายซึ่งปรับตามระดับความสูง

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