ควบคุมแผนภาพจีน

Google Maps - วิตกภาพควบคุมปริยาย

เมื่อแสดงแผนที่ Google ปกติ มันจะมีชุดวิตกภาพควบคุมปริยายตามเริ่มต้น:

  • การเปลี่ยนขนาด (Zoom) - แสดงตัวยื่นหรือปุ่ม "+/-" สำหรับการควบคุมระดับของการเปลี่ยนขนาด
  • การเลื่อน (Pan) - แสดงวิตกภาพควบคุมเลื่อนเพื่อเลื่อนแผนที่
  • การเปลี่ยนแปลงประเภทแผนที่ (MapType) - อนุญาตให้ผู้ใช้เปลี่ยนแปลงประเภทแผนที่ (แผนที่แนวทางและแผนที่ดาวเทียม)
  • Street View - แสดงไอคอนคนประกอบ Street View ที่สามารถลากมายังแผนที่เพื่อเปิด Street View

Google Maps - วิตกภาพควบคุมเพิ่มเติม

นอกจากวิตกภาพควบคุมปริยายแล้ว แผนที่ Google ยังให้

  • การแสดงของตัวเลข (Scale) - แสดงตัวเลขของแผนที่
  • การหมุน (Rotate) - แสดงไอคอนกลมเล็กที่อนุญาตให้คุณหมุนแผนที่
  • แผนที่เบื้องข้าง (Overview Map) - แสดงแผนที่ฉากย่อยเพื่อแสดงรูปภาพของบริเวณที่กว้างขวางของแผนที่ปัจจุบัน

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

Google Maps - ปิดวิตกภาพควบคุมปริยาย

คุณอาจต้องการปิดวิตกภาพควบคุมปริยาย

สำหรับเรื่องนี้ กรุณาตั้งค่าคุณสมบัติ disableDefaultUI ของแผนที่ (ในวิตกภาพควบคุมของแผนที่) ให้เป็น true:

ตัวอย่าง

var mapOptions {disableDefaultUI: true}

Google Maps - เปิดทุกๆวิตกภาพควบคุม

บางวิตกภาพควบคุมจะปรากฏตามเริ่มต้นในแผนที่; แต่บางส่วนไม่ปรากฏ ตามแนวทางที่คุณตั้งค่า

กรุณากำหนดวิตกภาพควบคุมที่จะเพิ่มหรือลบจากแผนที่ในวิตกภาพควบคุมของแผนที่。

การตั้งค่าวิตกภาพควบคุมเป็น true ทำให้มันเห็นได้ - การตั้งค่าเป็น false จะซ่อนมันไป。

นี้เป็นตัวอย่างที่เปิดทุกๆวิตกภาพควบคุม:

ตัวอย่าง

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - ปรับปรุงควบคุม

บางควบคุมแผนที่สามารถปรับแต่งได้.

คุณสามารถปรับปรุงควบคุมด้วยการกำหนด field ตัวเลือกของควบคุม.

ตัวอย่าง ใน field zoomControlOptions กำหนดตัวเลือกที่ใช้เพื่อปรับปรุงควบคุมย่อตัว. field zoomControlOptions อาจมี:

  • google.maps.ZoomControlStyle.SMALL - แสดงปุ่มย่อตัวเล็ก (เพียงปุ่ม + และ -)
  • google.maps.ZoomControlStyle.LARGE - แสดงปุ่มย่อตัวเฉลี่ย
  • google.maps.ZoomControlStyle.DEFAULT - เลือกควบคุมการย่อตัวที่ดีที่สุดตามอุปกรณ์และขนาดแผนที่

ตัวอย่าง

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

สัญญาณ: หากต้องการปรับปรุงควบคุมเครื่องมือ โปรดใช้งานควบคุมก่อน (จัดตั้งเป็น true).

หนึ่งในควบคุมที่สามารถปรับแต่งได้คือ MapType Control.

field mapTypeControlOptions กำหนดตัวเลือกที่ใช้เพื่อปรับปรุงควบคุมเครื่องมือ. field mapTypeControlOptions อาจมี:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - แสดงปุ่มสำหรับแบบแผนที่ทุกชนิด
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - คลิกเลือกชนิดแผนที่ผ่านประเภทเลือกที่มีในแถวตกลง
  • google.maps.MapTypeControlStyle.DEFAULT - แสดงพฤติกรรม "แบบเริ่มต้น" (ขึ้นอยู่กับขนาดหน้าจอ)

ตัวอย่าง

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

คุณยังสามารถใช้ความเป็นส่วนของ ControlPosition ในการตำแหน่งควบคุม:

ตัวอย่าง

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