หน้านี้ได้รับการแปลโดย Cloud Translation API

การควบคุม

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

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

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

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

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

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

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

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

UI เริ่มต้น

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

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

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

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

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

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

TypeScript

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

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

JavaScript

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

window.initMap = initMap;index.js

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

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

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

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

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

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

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

TypeScript

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

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

JavaScript

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

window.initMap = initMap;index.js

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

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

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

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

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

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

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

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

TypeScript

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

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

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

JavaScript

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

window.initMap = initMap;index.js

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;index.js

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

รวมทั้งแก้ไขรูปแบบและตําแหน่งของการควบคุม 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;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

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

การเพิ่มสถานะในการควบคุม

ตัวควบคุมยังอาจเก็บสถานะด้วย ตัวอย่างต่อไปนี้คล้ายกับตัวอย่างที่แสดงก่อนหน้านี้ แต่ตัวควบคุมจะมีปุ่ม "ตั้งค่าหน้าแรก" เพิ่มเติมซึ่งตั้งค่าตัวควบคุมให้แสดงตําแหน่งบ้านใหม่ โดยการสร้างพร็อพเพอร์ตี้ 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;index.ts

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell