ภาพรวมของการควบคุม
แผนที่ที่แสดงผ่าน 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;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
ลองใช้ตัวอย่าง
การเพิ่มตัวควบคุมลงในแผนที่
คุณอาจต้องปรับแต่งอินเทอร์เฟซโดยการนำออก เพิ่ม หรือแก้ไขลักษณะการทำงานของ UI หรือตัวควบคุม และตรวจสอบว่าการอัปเดตในอนาคตจะไม่เปลี่ยนลักษณะการทำงานนี้ หากต้องการเพิ่มหรือแก้ไขลักษณะการทำงานที่มีอยู่เท่านั้น คุณต้องตรวจสอบว่ามีการเพิ่มตัวควบคุมลงในแอปพลิเคชันอย่างชัดเจน
ตัวควบคุมบางรายการจะปรากฏในแผนที่โดยค่าเริ่มต้น ขณะที่ตัวควบคุมอื่นๆ จะไม่ปรากฏ เว้นแต่คุณจะขอให้เจาะจง มีการระบุการเพิ่มหรือนำการควบคุมออกจากแผนที่ในช่องของออบเจ็กต์ MapOptions
ต่อไปนี้ ซึ่งคุณตั้งค่าเป็น true
เพื่อทำให้เห็นการควบคุม หรือตั้งค่าเป็น false
เพื่อซ่อน
{ zoomControl: 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;
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;
ลองใช้ตัวอย่าง
ตัวเลือกการควบคุม
การควบคุมหลายรายการกำหนดค่าได้ ซึ่งช่วยให้คุณเปลี่ยนลักษณะการทำงานหรือเปลี่ยนรูปลักษณ์ได้ ตัวอย่างเช่น การควบคุมประเภทแผนที่อาจปรากฏเป็นแถบแนวนอนหรือเมนูแบบเลื่อนลง
การควบคุมเหล่านี้ได้รับการแก้ไขโดยแก้ไขช่องตัวเลือกการควบคุมที่เหมาะสมภายในออบเจ็กต์ MapOptions
เมื่อมีการสร้างแมป
ตัวอย่างเช่น ตัวเลือกสำหรับการเปลี่ยนแปลงการควบคุมประเภทแผนที่จะแสดงอยู่ในช่อง mapTypeControlOptions
ส่วนควบคุมประเภทแผนที่อาจปรากฏใน style
ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
แสดงอาร์เรย์ของตัวควบคุมเป็นปุ่มในแถบแนวนอนตามที่แสดงใน Google Mapsgoogle.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;
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;
ลองใช้ตัวอย่าง
โดยทั่วไปการควบคุมจะกำหนดค่าเมื่อมีการสร้างแผนที่ อย่างไรก็ตาม คุณอาจแก้ไขการนำเสนอตัวควบคุมแบบไดนามิกได้โดยเรียกใช้เมธอด setOptions()
ของ Map
เพื่อส่งผ่านตัวเลือกการควบคุมใหม่
การแก้ไขการควบคุม
คุณระบุการนำเสนอของตัวควบคุมได้เมื่อสร้างแผนที่ผ่านช่องต่างๆ ภายในออบเจ็กต์ MapOptions
ของแผนที่ ช่องเหล่านี้มีระบุอยู่ด้านล่าง
zoomControl
เปิด/ปิดใช้ตัวควบคุมการซูม โดยค่าเริ่มต้น ตัวควบคุมนี้จะปรากฏอยู่และปรากฏอยู่บริเวณด้านล่างขวาของแผนที่ ช่องzoomControlOptions
จะระบุZoomControlOptions
เพิ่มเติมเพื่อใช้กับการควบคุมนี้mapTypeControl
เปิด/ปิดใช้ส่วนควบคุมประเภทแผนที่ ที่ให้ผู้ใช้สลับใช้แผนที่ประเภทต่างๆ ได้ (เช่น แผนที่และดาวเทียม) โดยค่าเริ่มต้น ตัวควบคุมนี้จะปรากฏอยู่และปรากฏอยู่ที่มุมบนซ้ายของแผนที่ ช่องmapTypeControlOptions
จะระบุMapTypeControlOptions
ที่จะใช้สำหรับการควบคุมนี้เพิ่มเติมstreetViewControl
เปิด/ปิดใช้ตัวควบคุมเพ็กแมนที่ให้ผู้ใช้เปิดใช้งานภาพพาโนรามาของ 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;
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;
ลองใช้ตัวอย่าง
การควบคุมที่กำหนดเอง
เช่นเดียวกับการแก้ไขรูปแบบและตำแหน่งของการควบคุม 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'
โดยตั้งศูนย์กลางของแผนที่ไว้ที่ตำแหน่งเริ่มต้นที่เจาะจง ดังนี้
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;
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;
ลองใช้ตัวอย่าง
การเพิ่มสถานะในการควบคุม
ตัวควบคุมอาจจัดเก็บสถานะไว้ด้วย ตัวอย่างต่อไปนี้คล้ายกับตัวอย่างที่แสดงก่อนหน้านี้ แต่ตัวควบคุมจะมีปุ่ม "ตั้งค่าหน้าแรก" เพิ่มเติมซึ่งตั้งค่าตัวควบคุมให้แสดงตำแหน่งบ้านใหม่ โดยการสร้างพร็อพเพอร์ตี้ home_
ภายในตัวควบคุมเพื่อจัดเก็บสถานะนี้ แล้วระบุ Getter และ Setter สำหรับสถานะนั้น
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;
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;