การควบคุมของ Google แผนที่
Google Maps - การควบคุมเริ่มต้น
เมื่อแสดงแผนที่ Google มาตรฐาน จะมาพร้อมกับชุดควบคุมเริ่มต้น:
- ซูม - แสดงแถบเลื่อนหรือปุ่ม "+/-" เพื่อควบคุมระดับการซูมของแผนที่
- แพน - แสดงการควบคุมการแพนสำหรับการแพนแผนที่
- MapType - ให้ผู้ใช้สลับระหว่างประเภทแผนที่ (แผนงานและดาวเทียม)
- Street View - แสดงไอคอน Pegman ซึ่งสามารถลากไปยังแผนที่เพื่อเปิดใช้งาน Street View
Google Maps - การควบคุมเพิ่มเติม
นอกเหนือจากการควบคุมเริ่มต้นแล้ว Google แผนที่ยังมี:
- มาตราส่วน - แสดงองค์ประกอบมาตราส่วนแผนที่
- หมุน - แสดงไอคอนวงกลมขนาดเล็กที่ให้คุณหมุนแผนที่ได้
- แผนที่ภาพรวม - แสดงแผนที่ภาพรวมขนาดย่อที่สะท้อนวิวพอร์ตแผนที่ปัจจุบันภายในพื้นที่ที่กว้างขึ้น
คุณสามารถระบุตัวควบคุมที่จะแสดงเมื่อสร้างแผนที่ (ภายใน MapOptions) หรือโดยการเรียก setOptions() เพื่อเปลี่ยนตัวเลือกของแผนที่
Google Maps - ปิดการใช้งานการควบคุมเริ่มต้น
คุณอาจต้องการปิดการควบคุมเริ่มต้นแทน
ในการดำเนินการดังกล่าว ให้ตั้งค่าคุณสมบัติ disableDefaultUI ของแผนที่ (ภายในอ็อบเจ็กต์ตัวเลือกแผนที่) เป็นจริง:
ตัวอย่าง
var mapOptions {disableDefaultUI: true}
Google Maps - เปิดการควบคุมทั้งหมด
การควบคุมบางอย่างจะปรากฏบนแผนที่โดยค่าเริ่มต้น ในขณะที่รายการอื่นๆ จะไม่ปรากฏขึ้นเว้นแต่คุณจะตั้งค่าไว้
การเพิ่มหรือลบการควบคุมออกจากแผนที่ถูกระบุในออบเจกต์ตัวเลือกแผนที่
ตั้งค่าคอนโทรลให้เป็นจริงเพื่อให้มองเห็นได้ - ตั้งค่าคอนโทรลเป็นเท็จเพื่อซ่อน
ตัวอย่างต่อไปนี้เปิด "เปิด" การควบคุมทั้งหมด:
ตัวอย่าง
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - การปรับเปลี่ยนการควบคุม
การควบคุมแผนที่หลายแบบสามารถกำหนดค่าได้
ตัวควบคุมสามารถแก้ไขได้โดยการระบุฟิลด์ตัวเลือกการควบคุม
ตัวอย่างเช่น ตัวเลือกสำหรับการปรับเปลี่ยนตัวควบคุมการซูมระบุไว้ในฟิลด์zoomControlOptions ฟิลด์ zoomControlOptions อาจมี:
- google.maps.ZoomControlStyle.SMALL - แสดงการควบคุมการซูมขนาดเล็ก (เฉพาะปุ่ม + และ -)
- google.maps.ZoomControlStyle.LARGE - แสดงตัวควบคุมแถบเลื่อนการซูมมาตรฐาน
- google.maps.ZoomControlStyle.DEFAULT - เลือกการควบคุมการซูมที่ดีที่สุดตามอุปกรณ์และขนาดแผนที่
ตัวอย่าง
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
หมายเหตุ:หากคุณแก้ไขตัวควบคุม ให้เปิดใช้งานตัวควบคุมก่อนเสมอ (ตั้งค่าให้เป็นจริง)
การควบคุมที่กำหนดค่าได้อีกอย่างคือการควบคุม MapType
ตัวเลือกสำหรับการปรับเปลี่ยนตัวควบคุมระบุไว้ในฟิลด์ mapTypeControlOptions ฟิลด์ 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
}