ภาพรวม

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

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

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

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

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

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

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