Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

การควบคุม

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

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

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

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

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

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

UI เริ่มต้น

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

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

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

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

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

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

TypeScript

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

JavaScript

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

ดูตัวอย่าง

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

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

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

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

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

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

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

TypeScript

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

JavaScript

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

ดูตัวอย่าง

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

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

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

ตัวอย่างเช่น ตัวเลือกสำหรับการแก้ไขการควบคุมประเภทแผนที่จะระบุไว้ในช่อง mapTypeControlOptions ตัวควบคุมประเภทแผนที่อาจปรากฏในตัวเลือก style อย่างใดอย่างหนึ่งต่อไปนี้

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

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

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

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

TypeScript

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

JavaScript

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

ดูตัวอย่าง

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

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

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

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

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

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

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

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

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

ตำแหน่ง LTR

ตำแหน่ง (บริบท LTR)	ค่าคงที่เชิงตรรกะ (แนะนำ)	ค่าคงที่เดิม
ซ้ายบน	`BLOCK_START_INLINE_START`	`TOP_LEFT`
กึ่งกลางด้านบน	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
ด้านขวาบน	`BLOCK_START_INLINE_END`	`TOP_RIGHT`
บนซ้าย	`INLINE_START_BLOCK_START`	`LEFT_TOP`
ซ้ายกลาง	`INLINE_START_BLOCK_CENTER`	`LEFT_CENTER`
ซ้ายล่าง	`INLINE_START_BLOCK_END`	`LEFT_BOTTOM`
ขวาบน	`INLINE_END_BLOCK_START`	`RIGHT_TOP`
ขวากลาง	`INLINE_END_BLOCK_CENTER`	`RIGHT_CENTER`
ด้านขวาล่าง	`INLINE_END_BLOCK_END`	`RIGHT_BOTTOM`
ด้านซ้ายล่าง	`BLOCK_END_INLINE_START`	`BOTTOM_LEFT`
ตรงกลางด้านล่าง	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
ด้านขวาล่าง	`BLOCK_END_INLINE_END`	`BOTTOM_RIGHT`

ตำแหน่ง RTL

Position (RTL Context)	ค่าคงที่เชิงตรรกะ (แนะนำ)	ค่าคงที่เดิม
ด้านขวาบน	`BLOCK_START_INLINE_START`	`TOP_RIGHT`
กึ่งกลางด้านบน	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
ซ้ายบน	`BLOCK_START_INLINE_END`	`TOP_LEFT`
ขวาบน	`INLINE_START_BLOCK_START`	`RIGHT_TOP`
ขวากลาง	`INLINE_START_BLOCK_CENTER`	`RIGHT_CENTER`
ด้านขวาล่าง	`INLINE_START_BLOCK_END`	`RIGHT_BOTTOM`
บนซ้าย	`INLINE_END_BLOCK_START`	`LEFT_TOP`
ซ้ายกลาง	`INLINE_END_BLOCK_CENTER`	`LEFT_CENTER`
ซ้ายล่าง	`INLINE_END_BLOCK_END`	`LEFT_BOTTOM`
ด้านขวาล่าง	`BLOCK_END_INLINE_START`	`BOTTOM_RIGHT`
ตรงกลางด้านล่าง	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
ด้านซ้ายล่าง	`BLOCK_END_INLINE_END`	`BOTTOM_LEFT`

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

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

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

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();index.js

ดูตัวอย่าง

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

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

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

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

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

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

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

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

CSS เชิงประกาศ

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

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

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

HTML เชิงประกาศ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TypeScript

let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

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

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();index.ts

JavaScript

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

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

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();index.js

ดูตัวอย่าง