แผนที่ Google - กับชุดควบคุมเริ่มต้น:
Google แผนที่ - การควบคุมค่าเริ่มต้น
เมื่อแสดงแผนที่ Google มาตรฐานมันมาพร้อมกับชุดควบคุมเริ่มต้น:
- ซูม - แสดงเลื่อนหรือ "+/-" ปุ่มในการควบคุมระดับการซูมของแผนที่
- แพน - แสดงการควบคุมกระทะปรากฎแผนที่
- MapType - ช่วยให้ผู้ใช้สลับระหว่างประเภทแผนที่ (roadmap and satellite)
- Street View - แสดงไอคอนเพ็กแมนซึ่งสามารถลากไปแผนที่เพื่อเปิดใช้งาน Street View
Google แผนที่ - การควบคุมเพิ่มเติม
นอกเหนือไปจากการควบคุมค่าเริ่มต้น Google Maps ยังมี:
- - การแสดงองค์ประกอบแผนที่มาตราส่วน
- หมุน - แสดงไอคอนวงกลมขนาดเล็กที่ช่วยให้คุณสามารถหมุนแผนที่
- แผนที่ภาพรวม - แสดงแผนที่ภาพรวมสะท้อนให้เห็นถึงภาพขนาดย่อ viewport แผนที่ปัจจุบันที่อยู่ในพื้นที่ที่กว้างขึ้น
คุณสามารถระบุที่ควบคุมจะแสดงเมื่อมีการสร้างแผนที่ (inside MapOptions) หรือโดยการเรียก setOptions() การเปลี่ยนแปลงตัวเลือกของแผนที่
Google แผนที่ - ปิดการใช้งานการควบคุมการเริ่มต้น
คุณแทนอาจต้องการที่จะปิดการควบคุมการเริ่มต้น
จะทำเช่นนั้นตั้งค่าแผนที่ของโรงแรม disableDefaultUI (ภายในตัวเลือกแผนที่วัตถุ) ไปจริง:
Google แผนที่ - เปิดการควบคุมทั้งหมด
ตัวควบคุมบางปรากฏบนแผนที่โดยค่าเริ่มต้น ขณะที่คนอื่นจะไม่ปรากฏจนกว่าคุณจะตั้งพวกเขา
เพิ่มหรือลบการควบคุมจากแผนที่ระบุไว้ในตัวเลือกแผนที่วัตถุ
ตั้งค่าการควบคุมจริงเพื่อให้มองเห็นได้ - ตั้งค่าการควบคุมเป็นเท็จเพื่อซ่อนมัน
ตัวอย่างต่อไปนี้จะเปิด "on" การควบคุมทั้งหมด:
ตัวอย่าง
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true ลองตัวเอง» Google แผนที่ - แก้ไขการควบคุม
หลายของการควบคุมแผนที่กำหนด
การควบคุมที่สามารถแก้ไขได้โดยการระบุสาขาที่ตัวเลือกการควบคุม
ยกตัวอย่างเช่นตัวเลือกสำหรับการปรับเปลี่ยนการควบคุมการซูมที่ระบุไว้ในฟิลด์ zoomControlOptions สนาม zoomControlOptions อาจประกอบด้วย:
- google.maps.ZoomControlStyle.SMALL - แสดงการควบคุมมินิซูม (เฉพาะปุ่ม + และ -)
- google.maps.ZoomControlStyle.LARGE - แสดงการควบคุมการเลื่อนการซูมมาตรฐาน
- google.maps.ZoomControlStyle.DEFAULT - หยิบควบคุมการซูมที่ดีที่สุดขึ้นอยู่กับอุปกรณ์และขนาดของแผนที่
ตัวอย่าง
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
ลองตัวเอง» Note: หากคุณปรับเปลี่ยนการควบคุมเสมอช่วยให้การควบคุมเป็นครั้งแรก (set it to true)
อีกประการหนึ่งการควบคุมที่กำหนดค่าได้คือการควบคุม MapType
ตัวเลือกสำหรับการปรับเปลี่ยนการควบคุมที่ระบุไว้ในฟิลด์ mapTypeControlOptions สนาม mapTypeControlOptions อาจมี ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - จอแสดงผลปุ่มเดียวสำหรับแต่ละประเภทแผนที่
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - เลือกประเภทของแผนที่ผ่านทางเมนูแบบเลื่อนลง
- google.maps.MapTypeControlStyle.DEFAULT - แสดง "default" พฤติกรรม (depends on screen size)
ตัวอย่าง
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
} ลองตัวเอง» Google แผนที่ - การควบคุมที่กำหนดเอง
สร้างตัวควบคุมที่กำหนดเองที่มักจะพาคุณกลับไปยังกรุงลอนดอนเมื่อคลิก (if the map is dragged) :
ตัวอย่าง
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); ลองตัวเอง»