การควบคุม

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

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

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

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

ด้านล่างนี้เป็นรายการการควบคุมทั้งหมดที่คุณสามารถใช้ในแผนที่ได้

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

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

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

UI เริ่มต้น

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

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

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

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

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

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

เพิ่มการควบคุมลงในแผนที่

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

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

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

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

ขนาดของแผนที่ zoomControl มองเห็นได้ไหม
ตามแต่ละประเทศ false ไม่ได้
ตามแต่ละประเทศ true ใช่
>= 200x200 พิกเซล undefined ใช่
< 200x200 พิกเซล undefined ไม่ได้

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
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
  }
  ...

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

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

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

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js
ดูตัวอย่าง

ลองใช้ตัวอย่าง

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

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

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

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

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

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

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

หมายเหตุ: เราไม่สามารถรับประกันได้ว่าตัวควบคุมจะไม่ทับซ้อนกันเนื่องจากเลย์เอาต์ที่ซับซ้อน แต่ API จะพยายามจัดเรียงอย่างชาญฉลาด

ระบบรองรับตำแหน่งการควบคุมต่อไปนี้

  • TOP_CENTER บ่งชี้ว่าควรวางตัวควบคุม ที่ศูนย์กลางด้านบนของแผนที่
  • TOP_LEFT บ่งชี้ว่าควรวางตัวควบคุมไว้ ด้านซ้ายบนของแผนที่ พร้อมด้วยองค์ประกอบย่อยของตัวควบคุม "ต่อเนื่อง" ให้ไปยังตรงกลางด้านบน
  • TOP_RIGHT บ่งบอกว่าควรวางตัวควบคุมไว้ที่ด้านขวาบนของแผนที่ โดยให้องค์ประกอบย่อยของตัวควบคุม "ไหล" ไปทางตรงกลางด้านบน
  • LEFT_TOP บ่งบอกว่าควรวางตัวควบคุมไว้ที่ด้านซ้ายบนของแผนที่ แต่ให้อยู่ใต้องค์ประกอบ TOP_LEFT
  • RIGHT_TOP บ่งชี้ว่าควรวางตัวควบคุมไว้ ที่ด้านขวาบนของแผนที่ แต่ใต้ TOP_RIGHT จากองค์ประกอบเหล่านี้
  • LEFT_CENTER บ่งชี้ว่าควรวางตัวควบคุม ทางด้านซ้ายของแผนที่ ซึ่งอยู่ตรงกลางระหว่าง TOP_LEFT และ BOTTOM_LEFT ตำแหน่ง
  • RIGHT_CENTER บ่งชี้ว่าควรวางตัวควบคุม ทางด้านขวาของแผนที่ โดยให้อยู่ตรงกลางระหว่าง ตำแหน่งTOP_RIGHTและBOTTOM_RIGHT
  • LEFT_BOTTOM บ่งบอกว่าควรวางตัวควบคุมทางด้านซ้ายล่างของแผนที่ แต่ให้อยู่เหนือองค์ประกอบ BOTTOM_LEFT
  • RIGHT_BOTTOM บ่งบอกว่าควรวางตัวควบคุมไว้ที่ด้านขวาล่างของแผนที่ แต่เหนือองค์ประกอบ BOTTOM_RIGHT
  • BOTTOM_CENTER ระบุว่าควรวางตัวควบคุมไว้ที่กึ่งกลางด้านล่างของแผนที่
  • BOTTOM_LEFT บ่งชี้ว่าควรวางตัวควบคุม ที่ด้านซ้ายล่างของแผนที่ พร้อมด้วยองค์ประกอบย่อยของตัวควบคุม "ลื่นไหล" ไปจนถึงตรงกลางด้านล่าง
  • BOTTOM_RIGHT บ่งบอกว่าควรวางการควบคุมไว้ที่ด้านขวาล่างของแผนที่ โดยให้องค์ประกอบย่อยของการควบคุม "ไหล" ไปทางกึ่งกลางด้านล่าง

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

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

TypeScript

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

JavaScript

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

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

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

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

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

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

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

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;
}

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

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

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

ระบบจะวางตำแหน่งตัวควบคุมที่กำหนดเองบนแผนที่โดยการวางไว้ในตำแหน่งที่เหมาะสม ตำแหน่งภายใน controls ของออบเจ็กต์ Map พร็อพเพอร์ตี้นี้มีอาร์เรย์ของ google.maps.ControlPosition วินาที คุณเพิ่มการควบคุมที่กำหนดเองลงในแผนที่ได้โดยเพิ่ม Node (โดยทั่วไปคือ <div>) ลงใน ControlPosition ที่เหมาะสม (สำหรับข้อมูลเกี่ยวกับ ให้ดูควบคุมการจัดตำแหน่ง above.)

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

API จะวางการควบคุมในแต่ละตำแหน่งตามลำดับของ พร็อพเพอร์ตี้ index ที่มีดัชนีต่ำกว่าจะได้รับตำแหน่งก่อน ตัวอย่างเช่น การควบคุมที่กำหนดเอง 2 รายการที่ตำแหน่ง BOTTOM_RIGHT จะ แสดงตามลำดับดัชนีนี้ โดยค่าดัชนีที่ต่ำกว่าจะใช้ ลำดับความสำคัญ โดยค่าเริ่มต้น ระบบจะวางการควบคุมที่กําหนดเองทั้งหมดหลังการวางการควบคุมเริ่มต้นของ API คุณจะลบล้างลักษณะการทำงานนี้ได้โดยการตั้งค่าพร็อพเพอร์ตี้ index ของการควบคุมเป็นค่าลบ การควบคุมที่กำหนดเอง ไม่สามารถวางด้านซ้ายของโลโก้หรือด้านขวาของ ลิขสิทธิ์

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

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// 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);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

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

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

TypeScript

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

JavaScript

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_ ภายในการควบคุมเพื่อจัดเก็บสถานะนี้และ จัดหา Getters และ Setters สำหรับรัฐนั้น

TypeScript

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

JavaScript

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง