การควบคุม

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

แผนที่ที่แสดงผ่าน 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

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

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

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

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

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

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

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

// 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) ในกรณีดังกล่าว ตัวควบคุมจะทำงานตามตรรกะที่ระบุไว้สำหรับแต่ละตำแหน่ง และจะปรากฏใกล้กับตำแหน่งที่ระบุไว้มากที่สุด

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

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

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' โดยจัดกําหนดให้แผนที่อยู่ตรงกลางในตําแหน่งเริ่มต้นที่เจาะจง ดังนี้

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

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