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