การควบคุม

ภาพรวมการควบคุม

แผนที่ที่แสดงผ่าน Maps JavaScript API มีองค์ประกอบ UI เพื่อให้ผู้ใช้โต้ตอบกับแผนที่ได้ องค์ประกอบเหล่านี้เรียกว่าตัวควบคุม และคุณสามารถรวมตัวควบคุมเหล่านี้ในรูปแบบต่างๆ ไว้ในแอปพลิเคชันได้ หรือคุณจะปล่อยไว้โดยไม่ทำอะไรเลยก็ได้ และให้ Maps JavaScript API จัดการลักษณะการทำงานของการควบคุมทั้งหมด

แผนที่ต่อไปนี้แสดงชุดการควบคุมเริ่มต้นที่แสดงโดย Maps JavaScript API

ตามเข็มนาฬิกาจากซ้ายบน: ประเภทแผนที่, เต็มหน้าจอ, กล้อง, Street View, แป้นพิมพ์ลัด

ด้านล่างนี้คือรายการการควบคุมทั้งหมดที่คุณใช้ในแผนที่ได้

• การควบคุมประเภทแผนที่จะอยู่ในรูปแบบแถบปุ่มแบบเลื่อนลง หรือแนวนอน ซึ่งช่วยให้ผู้ใช้เลือกประเภทแผนที่ได้ (ROADMAP, SATELLITE, HYBRID หรือ TERRAIN) การควบคุมนี้จะปรากฏที่มุมซ้ายบน ของแผนที่โดยค่าเริ่มต้น
• ตัวควบคุมแบบเต็มหน้าจอมีตัวเลือกในการเปิด แผนที่ในโหมดเต็มหน้าจอ การควบคุมนี้จะเปิดใช้อยู่โดยค่าเริ่มต้นบนเดสก์ท็อปและ อุปกรณ์เคลื่อนที่ หมายเหตุ: iOS ไม่รองรับฟีเจอร์ แบบเต็มหน้าจอ ดังนั้นการควบคุมแบบเต็มหน้าจอจึงไม่ปรากฏในอุปกรณ์ iOS
• ฟีเจอร์การควบคุมกล้องมีทั้งการควบคุมการซูม และการควบคุมการแพน
• ตัวควบคุม Street View มีไอคอนเพ็กแมน ซึ่งลากไปบนแผนที่เพื่อเปิดใช้ Street View ได้ การควบคุมนี้ จะปรากฏที่ด้านขวาล่างของแผนที่โดยค่าเริ่มต้น
• การควบคุมการหมุนมีตัวเลือกการเอียงและการหมุนสำหรับแผนที่ที่มีภาพ 3 มิติ ตัวควบคุมนี้จะปรากฏใกล้กับด้านขวาล่างของแผนที่โดยค่าเริ่มต้น ดูข้อมูลเพิ่มเติมได้ที่ ภาพรวม 3 มิติ
• ตัวควบคุมมาตราส่วนจะแสดงองค์ประกอบมาตราส่วนของแผนที่ การควบคุมนี้จะปิดไว้โดยค่าเริ่มต้น
• การควบคุมด้วยแป้นพิมพ์ลัดจะแสดงรายการ แป้นพิมพ์ลัดสำหรับการโต้ตอบกับแผนที่

คุณจะไม่เข้าถึงหรือแก้ไขการควบคุมแผนที่เหล่านี้โดยตรง แต่คุณสามารถแก้ไขMapOptionsฟิลด์ของแผนที่ซึ่งมีผลต่อระดับการมองเห็น และการนำเสนอการควบคุมได้ คุณสามารถปรับการนำเสนอการควบคุมได้เมื่อ สร้างอินสแตนซ์ของแผนที่ (ด้วย MapOptions ที่เหมาะสม) หรือแก้ไข แผนที่แบบไดนามิกโดยเรียกใช้ setOptions() เพื่อเปลี่ยนตัวเลือกของแผนที่

การควบคุมเหล่านี้บางอย่างไม่ได้เปิดใช้โดยค่าเริ่มต้น ดูข้อมูลเกี่ยวกับลักษณะการทำงานของ UI เริ่มต้น (และวิธีแก้ไขลักษณะการทำงานดังกล่าว) ได้ที่UI เริ่มต้นด้านล่าง

UI เริ่มต้น

โดยค่าเริ่มต้น ตัวควบคุมทั้งหมดจะหายไปหากแผนที่มีขนาดเล็กเกินไป (200x200 พิกเซล) คุณลบล้างลักษณะการทำงานนี้ได้โดยตั้งค่าการควบคุมให้ แสดงอย่างชัดเจน ดูการเพิ่มตัวควบคุมลงใน แผนที่

ลักษณะการทำงานและลักษณะที่ปรากฏของตัวควบคุมจะเหมือนกันในอุปกรณ์เคลื่อนที่และเดสก์ท็อป ยกเว้นตัวควบคุมแบบเต็มหน้าจอ (ดูลักษณะการทำงานที่อธิบายไว้ในรายการตัวควบคุม)

นอกจากนี้ การจัดการแป้นพิมพ์จะเปิดอยู่โดยค่าเริ่มต้นในอุปกรณ์ทุกเครื่อง

ปิดใช้ UI เริ่มต้น

คุณอาจต้องการปิดปุ่ม UI เริ่มต้นของ API ทั้งหมด โดยตั้งค่าพร็อพเพอร์ตี้ disableDefaultUI ของแผนที่ (ภายในออบเจ็กต์ MapOptions) เป็น true พร็อพเพอร์ตี้นี้ จะปิดใช้ปุ่มควบคุม UI จาก Maps JavaScript API แต่จะไม่ส่งผลต่อท่าทางสัมผัสด้วยเมาส์หรือแป้นพิมพ์ลัดในแผนที่ฐาน ซึ่งควบคุมโดยพร็อพเพอร์ตี้ gestureHandling และ keyboardShortcuts ตามลำดับ

โค้ดต่อไปนี้จะปิดใช้ปุ่ม UI

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

เพิ่มตัวควบคุมลงในแผนที่

คุณอาจต้องการปรับแต่งอินเทอร์เฟซโดยการนำออก เพิ่ม หรือแก้ไขลักษณะการทำงานหรือตัวควบคุม UI และตรวจสอบว่าการอัปเดตในอนาคตจะไม่เปลี่ยนแปลงลักษณะการทำงานนี้ หากต้องการเพิ่มหรือแก้ไขลักษณะการทำงานที่มีอยู่เท่านั้น คุณต้อง ตรวจสอบว่าได้เพิ่มการควบคุมลงในแอปพลิเคชันอย่างชัดเจน

การควบคุมบางอย่างจะปรากฏบนแผนที่โดยค่าเริ่มต้น แต่บางอย่างจะไม่ปรากฏ เว้นแต่คุณจะขอโดยเฉพาะ การเพิ่มหรือนำตัวควบคุมออกจากแผนที่จะระบุไว้ในฟิลด์ของMapOptionsออบเจ็กต์trueต่อไปนี้ ซึ่งคุณตั้งค่าเป็น true เพื่อให้มองเห็นได้ หรือตั้งค่าเป็น false เพื่อซ่อน

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

โดยค่าเริ่มต้น ตัวควบคุมทั้งหมดจะหายไปหากแผนที่มีขนาดเล็กกว่า 200x200 พิกเซล คุณลบล้างลักษณะการทำงานนี้ได้โดยตั้งค่าการควบคุมให้ แสดงอย่างชัดเจน ตัวอย่างเช่น ตารางต่อไปนี้แสดงว่าการควบคุมกล้องจะ มองเห็นได้หรือไม่ โดยอิงตามขนาดแผนที่และการตั้งค่าของ ฟิลด์ cameraControl

ตัวอย่างต่อไปนี้จะตั้งค่าแผนที่ให้ซ่อนการควบคุมกล้องและแสดง การควบคุมมาตราส่วน โปรดทราบว่าเราไม่ได้ปิดใช้ UI เริ่มต้นอย่างชัดเจน ดังนั้น การแก้ไขเหล่านี้จึงเป็นการเพิ่มลักษณะการทำงานของ UI เริ่มต้น

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

ตัวเลือกการควบคุม

การควบคุมหลายอย่างกำหนดค่าได้ ซึ่งช่วยให้คุณเปลี่ยนลักษณะการทำงานหรือ เปลี่ยนลักษณะที่ปรากฏได้ ตัวอย่างเช่น ตัวควบคุมประเภทแผนที่อาจปรากฏเป็นแถบแนวนอนหรือเมนูแบบเลื่อนลง

โดยจะแก้ไขการควบคุมเหล่านี้ได้ด้วยการเปลี่ยนฟิลด์ตัวเลือก การควบคุมที่เหมาะสมภายในออบเจ็กต์ MapOptions เมื่อสร้างแผนที่

เช่น ตัวเลือกในการเปลี่ยนตัวควบคุมประเภทแผนที่จะระบุไว้ในmapTypeControlOptionsฟิลด์ ตัวควบคุมประเภทแผนที่อาจปรากฏใน ตัวเลือกstyleต่อไปนี้

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR แสดงอาร์เรย์ของตัวควบคุมเป็นปุ่มในแถบแนวนอนตามที่แสดงใน Google Maps
• google.maps.MapTypeControlStyle.DROPDOWN_MENU จะแสดง ปุ่มควบคุมปุ่มเดียวที่ให้คุณเลือกประเภทแผนที่โดยใช้เมนูแบบเลื่อนลง
• google.maps.MapTypeControlStyle.DEFAULT แสดงลักษณะการทำงานเริ่มต้น ซึ่งขึ้นอยู่กับขนาดหน้าจอและอาจเปลี่ยนแปลงใน API เวอร์ชันต่อๆ ไป

โปรดทราบว่าหากคุณแก้ไขตัวเลือกการควบคุมใดๆ คุณควรเปิดใช้การควบคุมอย่างชัดเจนด้วยโดยการตั้งค่า MapOptions ที่เหมาะสมเป็น true เช่น หากต้องการตั้งค่าตัวควบคุมประเภทแผนที่ เพื่อแสดงรูปแบบ DROPDOWN_MENU ให้ใช้โค้ดต่อไปนี้ภายใน ออบเจ็กต์ MapOptions

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนตำแหน่งและรูปแบบเริ่มต้นของตัวควบคุม

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.js

โดยปกติแล้วจะมีการกำหนดค่าตัวควบคุมเมื่อสร้างแผนที่ อย่างไรก็ตาม คุณอาจเปลี่ยนการนำเสนอของตัวควบคุมแบบไดนามิกได้โดย เรียกใช้เมธอด setOptions() ของ Map และส่งตัวเลือกการควบคุมใหม่ให้

แก้ไขการควบคุม

คุณระบุการนำเสนอของตัวควบคุมเมื่อสร้างแผนที่ ผ่านฟิลด์ภายในออบเจ็กต์ MapOptions ของแผนที่ ฟิลด์เหล่านี้ ระบุไว้ด้านล่าง

• cameraControl เปิด/ปิดใช้การควบคุมกล้องที่ ช่วยให้ผู้ใช้ซูมและเลื่อนแผนที่ได้ การควบคุมนี้จะแสดงในแผนที่ทั้งหมดโดยค่าเริ่มต้น นอกจากนี้ ฟิลด์ cameraControlOptions ยังระบุ CameraControlOptions ที่จะใช้สำหรับการควบคุมนี้ด้วย
• mapTypeControl เปิด/ปิดใช้ตัวควบคุมประเภทแผนที่ ซึ่งช่วยให้ผู้ใช้สลับระหว่างประเภทแผนที่ (เช่น แผนที่และดาวเทียม) ได้ โดยค่าเริ่มต้น ตัวควบคุมนี้จะปรากฏที่มุมซ้ายบนของแผนที่ ฟิลด์ mapTypeControlOptions ยังระบุ MapTypeControlOptions ที่จะใช้สำหรับการควบคุมนี้ด้วย
• streetViewControl เปิด/ปิดการควบคุม Pegman ซึ่งช่วยให้ผู้ใช้เปิดใช้งานภาพพาโนรามาของ Street View ได้ โดยค่าเริ่มต้น ตัวควบคุมนี้จะปรากฏที่ด้านขวาล่างของแผนที่ ฟิลด์ streetViewControlOptions ยังระบุ StreetViewControlOptions ที่จะใช้สำหรับการควบคุมนี้ด้วย
• rotateControl เปิด/ปิดลักษณะที่ปรากฏของ การควบคุมการหมุนเพื่อควบคุมการวางแนวของภาพ 3 มิติ โดย ค่าเริ่มต้น ระบบจะกำหนดการแสดงผลของตัวควบคุมตามการแสดงผลหรือไม่แสดงผล ภาพ 3 มิติสำหรับประเภทแผนที่ที่ระบุที่ระดับการซูมและ ตำแหน่งปัจจุบัน คุณอาจเปลี่ยนลักษณะการทำงานของตัวควบคุมได้โดยการตั้งค่า rotateControlOptionsของแผนที่เพื่อระบุ RotateControlOptions ที่จะใช้ การควบคุมจะปรากฏในแผนที่ฐาน 3 มิติเท่านั้น
• scaleControl เปิด/ปิดใช้การควบคุมมาตราส่วนที่ แสดงมาตราส่วนแผนที่ โดยค่าเริ่มต้น ตัวควบคุมนี้จะไม่ปรากฏ เมื่อ เปิดใช้แล้ว แถบนี้จะปรากฏที่มุมขวาล่างของแผนที่เสมอ scaleControlOptions ยังระบุ ScaleControlOptions ที่จะใช้สำหรับการควบคุมนี้ด้วย
• fullscreenControl เปิด/ปิดการควบคุมที่เปิด แผนที่ในโหมดเต็มหน้าจอ โดยค่าเริ่มต้น การควบคุมนี้จะเปิดใช้โดยค่าเริ่มต้น ในอุปกรณ์เดสก์ท็อปและ Android เมื่อเปิดใช้แล้ว ตัวควบคุมจะปรากฏที่ด้านขวาบนของแผนที่ fullscreenControlOptions ยังระบุ FullscreenControlOptions ที่จะใช้สำหรับการควบคุมนี้ด้วย

โปรดทราบว่าคุณอาจระบุตัวเลือกสำหรับการควบคุมที่คุณปิดใช้ในตอนแรกได้

การวางตำแหน่งการควบคุม

ตัวเลือกการควบคุมส่วนใหญ่มีpositionพร็อพเพอร์ตี้ (ประเภท ControlPosition) ซึ่งระบุตำแหน่งที่จะวาง การควบคุมบนแผนที่ การวางตำแหน่งของตัวควบคุมเหล่านี้ไม่แน่นอน แต่ API จะจัดวางการควบคุมอย่างชาญฉลาดโดยวางไว้รอบๆ องค์ประกอบของแผนที่ที่มีอยู่หรือการควบคุมอื่นๆ ภายในข้อจำกัดที่กำหนด (เช่น ขนาดแผนที่)

ตำแหน่งควบคุมมี 2 รูปแบบ ได้แก่ แบบเดิมและแบบตรรกะ ขอแนะนำให้ใช้ค่าเชิงตรรกะ เพื่อให้รองรับบริบทเลย์เอาต์จากซ้ายไปขวา (LTR) และ จากขวาไปซ้าย (RTL) ได้โดยอัตโนมัติ ดูคู่มืออ้างอิง

ตารางต่อไปนี้แสดงตำแหน่งการควบคุมที่รองรับในบริบท LTR และ RTL

คลิกป้ายกำกับเพื่อสลับแผนที่ระหว่างโหมด LTR และ RTL

โปรดทราบว่าตำแหน่งเหล่านี้อาจตรงกับตำแหน่งขององค์ประกอบ UI ซึ่งคุณอาจแก้ไขตำแหน่งไม่ได้ (เช่น ลิขสิทธิ์และโลโก้ Google) ในกรณีดังกล่าว ตัวควบคุมจะไหลตามตรรกะที่ระบุไว้สำหรับ แต่ละตำแหน่งและจะปรากฏใกล้กับตำแหน่งที่ระบุไว้มากที่สุด เราไม่สามารถรับประกันได้ว่าการควบคุมจะไม่ทับซ้อนกันเนื่องจากเลย์เอาต์ที่ซับซ้อน แต่ API จะพยายามจัดเรียงอย่างชาญฉลาด

ตัวอย่างต่อไปนี้แสดงแผนที่พื้นฐานที่เปิดใช้การควบคุมทั้งหมดในตำแหน่งต่างๆ

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

การควบคุมที่กำหนดเอง

นอกเหนือจากการแก้ไขรูปแบบและตำแหน่งของตัวควบคุม API ที่มีอยู่ คุณยังสร้างตัวควบคุมของคุณเองเพื่อจัดการการโต้ตอบกับผู้ใช้ได้ด้วย Controls เป็นวิดเจ็ตแบบคงที่ซึ่งลอยอยู่เหนือแผนที่ในตำแหน่งสัมบูรณ์ ซึ่งแตกต่างจากการวางซ้อนที่เคลื่อนที่ไปพร้อมกับแผนที่พื้นฐาน กล่าวโดยพื้นฐานแล้ว ตัวควบคุมคือ<div>องค์ประกอบซึ่ง มีตำแหน่งสัมบูรณ์บนแผนที่ แสดง UI บางอย่างต่อผู้ใช้ และ จัดการการโต้ตอบกับผู้ใช้หรือแผนที่ โดยปกติจะผ่านตัวแฮนเดิลเหตุการณ์

หากต้องการสร้างการควบคุมที่กำหนดเอง คุณจะต้องมีกฎเพียงไม่กี่ข้อ อย่างไรก็ตาม หลักเกณฑ์ต่อไปนี้สามารถใช้เป็นแนวทางปฏิบัติแนะนำได้

• กำหนด CSS ที่เหมาะสมสำหรับองค์ประกอบควบคุมที่จะแสดง
• จัดการการโต้ตอบกับผู้ใช้หรือแผนที่ผ่านตัวแฮนเดิลเหตุการณ์สําหรับ การเปลี่ยนแปลงพร็อพเพอร์ตี้แผนที่หรือเหตุการณ์ของผู้ใช้ (เช่น 'click' เหตุการณ์)
• สร้างองค์ประกอบ <div> เพื่อเก็บตัวควบคุมและเพิ่ม องค์ประกอบนี้ลงในพร็อพเพอร์ตี้ controls ของ Map

เราจะพูดถึงข้อกังวลแต่ละข้อด้านล่าง

วาดตัวควบคุมที่กำหนดเอง

คุณจะวาดการควบคุมอย่างไรก็ได้ โดยทั่วไป เราขอแนะนำให้คุณ วางการนำเสนอการควบคุมทั้งหมดไว้ภายในองค์ประกอบ <div> เดียว เพื่อให้คุณจัดการการควบคุมเป็น หน่วยเดียวได้ เราจะใช้รูปแบบการออกแบบนี้ในตัวอย่างที่แสดงด้านล่าง

การออกแบบตัวควบคุมที่น่าสนใจต้องมีความรู้เกี่ยวกับ CSS และโครงสร้าง DOM ตัวอย่างโค้ดต่อไปนี้แสดงการเพิ่มตัวควบคุมที่กำหนดเองโดยใช้ทั้ง HTML ที่ประกาศและวิธีการแบบเป็นโปรแกรม

CSS ที่ประกาศ

รูปแบบ CSS ต่อไปนี้จะให้ลักษณะที่สอดคล้องกับ ตัวควบคุมเริ่มต้น ใช้รูปแบบเหล่านี้กับทั้ง 2 ตัวอย่างด้านล่าง

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

HTML เชิงประกาศ

ข้อมูลโค้ดเหล่านี้แสดงวิธีสร้างการควบคุมที่กำหนดเองแบบประกาศ ใน HTML ระบบจะใช้ DIV ที่มีรหัส container เพื่อจัดตำแหน่ง ตัวควบคุม ซึ่งจะซ้อนอยู่ภายในองค์ประกอบ gmp-map และ ปุ่มจะเพิ่มลงใน DIV ระบบจะตั้งค่าแอตทริบิวต์ slot เป็น control-inline-start-block-start เพื่อจัดตำแหน่งตัวควบคุมที่ มุมซ้ายบนของแผนที่

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

ใน JavaScript จะใช้ getElementById() เพื่อค้นหา DIV และปุ่ม จากนั้นจะเพิ่ม Listener เหตุการณ์ ลงในปุ่ม และต่อท้ายปุ่มกับ DIV

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

JavaScript แบบเป็นโปรแกรม

ข้อมูลโค้ดนี้แสดงการสร้างตัวควบคุมปุ่มแบบเป็นโปรแกรม รูปแบบ CSS มีคำจำกัดความอยู่ด้านบน

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

จัดการเหตุการณ์จากตัวควบคุมที่กำหนดเอง

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

หากต้องการตอบสนองต่ออินพุตของผู้ใช้ ให้ใช้ addEventListener() ซึ่งจัดการเหตุการณ์ DOM ที่รองรับ ข้อมูลโค้ดต่อไปนี้จะเพิ่ม Listener สำหรับเหตุการณ์ 'click' ของเบราว์เซอร์ โปรดทราบว่าเหตุการณ์นี้ได้รับจาก DOM ไม่ใช่จากแผนที่

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

ทำให้การควบคุมที่กำหนดเองเข้าถึงได้

หากต้องการให้มั่นใจว่าตัวควบคุมจะได้รับเหตุการณ์จากคีย์บอร์ดและปรากฏอย่างถูกต้องในโปรแกรมอ่านหน้าจอ ให้ทำดังนี้

• ใช้เสมอว่าองค์ประกอบ HTML ดั้งเดิมสำหรับปุ่ม องค์ประกอบแบบฟอร์ม และป้ายกำกับ ใช้เฉพาะองค์ประกอบ DIV เป็นคอนเทนเนอร์เพื่อเก็บตัวควบคุมดั้งเดิมเท่านั้น ห้ามนำ DIV มาใช้ซ้ำเป็นองค์ประกอบ UI แบบอินเทอร์แอกทีฟ
• ใช้องค์ประกอบ label, แอตทริบิวต์ title หรือแอตทริบิวต์ aria-label ตามความเหมาะสม เพื่อให้ข้อมูลเกี่ยวกับองค์ประกอบ UI

วางตำแหน่งการควบคุมที่กำหนดเอง

ใช้แอตทริบิวต์ slot เพื่อจัดวางตัวควบคุมที่กำหนดเอง โดยระบุตำแหน่งตัวควบคุมที่ต้องการ ดูข้อมูลเกี่ยวกับตำแหน่งเหล่านี้ได้ที่ควบคุมการวางตำแหน่ง ด้านบน

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

โค้ดต่อไปนี้จะสร้างการควบคุมที่กำหนดเองใหม่ (ไม่ได้แสดงตัวสร้าง) และเพิ่มลงในแผนที่ในตำแหน่ง BLOCK_START_INLINE_END (ขวาบนในบริบท LTR)

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

หากต้องการตั้งค่าตำแหน่งของตัวควบคุมที่กำหนดเองแบบประกาศ ให้ตั้งค่าแอตทริบิวต์ slot ใน HTML ดังนี้

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

ตัวอย่างการควบคุมที่กำหนดเอง

การควบคุมต่อไปนี้เป็นแบบง่าย (แม้ว่าจะไม่ได้มีประโยชน์มากนัก) และ รวมรูปแบบที่แสดงด้านบน การควบคุมนี้จะตอบสนองต่อเหตุการณ์ DOM 'click' โดยการจัดกึ่งกลางแผนที่ที่ตำแหน่งเริ่มต้น ที่แน่นอน

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

เพิ่มสถานะไปยังการควบคุม

นอกจากนี้ ตัวควบคุมยังอาจจัดเก็บสถานะด้วย ตัวอย่างต่อไปนี้คล้ายกับตัวอย่างที่ แสดงก่อนหน้า แต่ตัวควบคุมมีปุ่ม "ตั้งค่าบ้าน" เพิ่มเติม ซึ่ง จะตั้งค่าตัวควบคุมให้แสดงตำแหน่งบ้านใหม่ เราทำเช่นนี้โดยการสร้างพร็อพเพอร์ตี้home_ภายในตัวควบคุมเพื่อจัดเก็บสถานะนี้ และ จัดเตรียมตัวรับและตัวตั้งค่าสำหรับสถานะดังกล่าว

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js