บทช่วยสอน Google แผนที่ตั้งค่าการควบคุม ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
Google แผนที่ - ชุดควบคุมการเริ่มต้นการตั้งค่า:,Google แผนที่ - ชุดควบคุมมากขึ้น,Google แผนที่ - ปิดชุดควบคุมเริ่มต้น,ตัวอย่าง,Google แผนที่ - การควบคุมการตั้งค่าทั้งหมดที่จะเปิด,ตัวอย่าง,Google แผนที่ - ปรับเปลี่ยนชุดควบคุม,ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,Google แผนที่ - การควบคุมที่กำหนดเองตั้ง,ตัวอย่าง,Google แผนที่ - ตั้งค่าการควบคุมการใช้อ้างอิง,
Google แผนที่ตั้งค่าการควบคุม
แผนที่ Google - ชุดควบคุมการเริ่มต้นการตั้งค่า:
Google แผนที่ - ชุดควบคุมการเริ่มต้นการตั้งค่า:
เมื่อมีการใช้แผนที่ Google มาตรฐานตั้งค่าเริ่มต้นมีดังนี้
- .Zoom- แสดงแถบเลื่อนเพื่อควบคุมระดับซูมแผนที่
- .PPan- บนจอแสดงผลแผนที่เป็นแบนควบคุมชามเหมือนคลิกที่มุมทั้งสี่ของกระทะแผนที่
- .MapType- ช่วยให้ผู้ใช้เลือกประเภทแผนที่ (แผนงานและ satallite) สวิทช์
- .StreetView- ปรากฏเป็นไอคอนเพ็กแมนคุณสามารถลากไปยังจุดบนแผนที่เพื่อเปิดมุมมองถนน
Google แผนที่ - ชุดควบคุมมากขึ้น
นอกเหนือไปจากชุดควบคุมเริ่มต้นดังกล่าวข้างต้นนอกจากนี้ Google ยัง:
- แผนที่มาตราส่วน .Scale- การแสดงผล
- .Rotate- แสดงเส้นรอบวงขนาดเล็กของไอคอนคุณสามารถหมุนแผนที่
- .verview มุมมองแผนทำแผนที่จากมุมมองของแผนที่บริเวณกว้าง
เมื่อคุณสร้างแผนที่คุณสามารถระบุชุดควบคุมจะปรากฏโดยการตั้งค่าตัวเลือกหรือโทร setOptions A () เพื่อเปลี่ยนแผนที่ตั้งค่าตัวเลือก
Google แผนที่ - ปิดชุดควบคุมเริ่มต้น
คุณอาจต้องการที่จะปิดการตั้งค่าเริ่มต้นของการควบคุม
หากต้องการปิดชุดควบคุมเริ่มต้นตั้งค่าคุณสมบัติในแผนที่ disableDefaultUI จริง:
ตัวอย่าง
disableDefaultUI:true
ลอง»
Google แผนที่ - การควบคุมการตั้งค่าทั้งหมดที่จะเปิด
ตัวควบคุมบางตั้งค่าการแสดงเริ่มต้นบนแผนที่ในขณะที่คนอื่นจะไม่เว้นแต่คุณจะตั้งพวกเขา
ตั้งค่าการควบคุมเพื่อให้มองเห็นความจริง - ตั้งค่าการควบคุมเป็น false จะซ่อนมัน
ตัวอย่างต่อไปนี้จะมีการเปิดตัวควบคุมทั้งหมด:
ตัวอย่าง
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
ลอง»
Google แผนที่ - ปรับเปลี่ยนชุดควบคุม
บางคนควบคุมแผนที่กำหนด การควบคุมการเปลี่ยนแปลงการตั้งค่าโดยการพัฒนาฟิลด์ตัวเลือกการควบคุม
F ตัวอย่างเช่นในการแก้ไขตัวเลือกการควบคุมซูมระบุ zoomControlOptions zoomControlOptions มีสามตัวเลือกต่อไปนี้:
- .google.maps.ZoomControlStyle.SMALL- แสดงผลลดการควบคุมการซูม
- .google.maps.ZoomControlStyle.LARGE- ซูมมาตรฐานการควบคุมการแสดงภาพสไลด์
- .google.maps.ZoomControlStyle.DEFAULT- อุปกรณ์ที่ใช้และขนาดของแผนที่เลือกการควบคุมที่เหมาะสมที่สุด
ตัวอย่าง
zoomControl : true ,
zoomControlOptions :
{
style : google . maps . ZoomControlStyle . SMALL
}
ลอง» หมายเหตุ: หากคุณจำเป็นต้องปรับเปลี่ยนการควบคุมการควบคุมการเปิดครั้งแรก (ตั้งค่าเป็นจริง)
การควบคุมก็คือการควบคุม MapType
ควบคุม MapType อาจปรากฏในหนึ่งในตัวเลือกรูปแบบต่อไปนี้:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR ในแถบแนวนอนจะปรากฏเป็นชุดของปุ่มควบคุมดังแสดงใน Google แผนที่
- 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
}
ลอง»
Google แผนที่ - การควบคุมที่กำหนดเองตั้ง
สร้างตัวควบคุมที่กำหนดเองเพื่อกลับไปยังกรุงลอนดอนเพื่อคลิกเหตุการณ์: (ถ้าแผนที่ถูกลาก):
ตัวอย่าง
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);
ลอง»
Google แผนที่ - ตั้งค่าการควบคุมการใช้อ้างอิง
Google Maps API คู่มืออ้างอิง