ชุดควบคุมแผนที่ Google
Google Maps - การตั้งค่าการควบคุมเริ่มต้น:
เมื่อใช้ Google Maps มาตรฐานการตั้งค่าเริ่มต้นมีดังนี้:
1.zoom - แสดงตัวเลื่อนเพื่อควบคุมระดับการซูมของแผนที่
2.PPAN- แผนที่แสดงการควบคุมแบบชามแบบแบนล่างคลิก 4 มุมเพื่อเลื่อนแผนที่
3.MapType - อนุญาตให้ผู้ใช้สลับระหว่างประเภทแผนที่ (Roadmap และ Satallite)
4. Streetview - แสดงเป็นไอคอน Villain View Street คุณสามารถลากไปยังจุดบนแผนที่เพื่อเปิดวิวถนน
Google Maps - ชุดควบคุมเพิ่มเติม
นอกเหนือจากชุดควบคุมเริ่มต้นข้างต้น Google ยังมี:
.Scale - แสดงมาตราส่วนแผนที่
.rotate - แสดงไอคอนเส้นรอบวงขนาดเล็กที่สามารถหมุนแผนที่ได้
. VERVIEW MAP - ดูแผนที่จากมุมมองพื้นที่กว้าง
เมื่อสร้างแผนที่คุณสามารถระบุชุดควบคุมที่จะแสดงผ่านตัวเลือกการตั้งค่าหรือเปลี่ยนตัวเลือกการตั้งค่าของแผนที่โดยเรียก setOptions ()
Google Maps - ปิดชุดควบคุมเริ่มต้น
คุณอาจต้องการปิดชุดควบคุมเริ่มต้น
หากต้องการปิดชุดควบคุมเริ่มต้นตั้งค่าคุณสมบัติของ disabledefaultui ของแผนที่เป็น TRUE:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 7, disabledefaultui: จริง, maptypeid: google.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body>Google Maps - เปิดชุดควบคุมทั้งหมด
ชุดควบคุมบางชุดจะปรากฏบนแผนที่โดยค่าเริ่มต้นในขณะที่ชุดอื่นไม่ได้เว้นแต่คุณจะตั้งค่า
ตั้งค่าการควบคุมเป็นจริงเพื่อให้มองเห็นได้ - ตั้งค่าการควบคุมเป็นเท็จเพื่อซ่อนไว้
ตัวอย่างต่อไปนี้เปิดใช้งานการควบคุมทั้งหมด:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 7, pancontrol: จริง, zoomcontrol: จริง, maptypecontrol: true, scalecontrol: true, streetviewcontrol: true, ภาพรวม - var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body>Google Maps - แก้ไขชุดควบคุม
การควบคุมแผนที่บางตัวสามารถกำหนดค่าได้ เปลี่ยนชุดควบคุมโดยการสร้างฟิลด์ตัวเลือกการควบคุม
ตัวอย่างเช่นตัวเลือกในการแก้ไขการควบคุมการซูมถูกระบุใน ZoomControloptions ZoomControloptions มี 3 ตัวเลือกต่อไปนี้:
1. google.maps.zoomcontrolstyle.small - แสดงการควบคุมการซูมน้อยที่สุด
2. google.maps.zoomcontrolstyle.large - แสดงการควบคุมการเลื่อนซูมมาตรฐานมาตรฐาน
3. google.maps.zoomcontrolstyle.default- เลือกการควบคุมที่เหมาะสมที่สุดตามอุปกรณ์และขนาดของแผนที่
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 7, zoomcontrol: จริง, zoomcontroloptions: {style: google.maps.zoomcontrolstyle.small}, maptypeid: google.maps.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body>หมายเหตุ: หากคุณต้องการปรับเปลี่ยนการควบคุมให้เปิดตัวควบคุมก่อน (ตั้งค่าเป็นจริง)
การควบคุมอื่นคือการควบคุม MapType
การควบคุม MapType สามารถแสดงเป็นหนึ่งในตัวเลือกสไตล์ต่อไปนี้:
1.Google.Maps.Maptypecontrolstyle.horizontal_bar ใช้เพื่อแสดงชุดควบคุมเป็นปุ่มดังแสดงใน Google Maps ในแถบแนวนอน
2. google.maps.maptypecontrolstyle.dropdown_menu สำหรับการแสดงการควบคุมปุ่มเดียวเพื่อให้คุณเลือกประเภทแผนที่จากเมนูแบบเลื่อนลง
3. google.maps.maptypecontrolstyle.default ใช้เพื่อแสดงพฤติกรรม "เริ่มต้น" ซึ่งขึ้นอยู่กับขนาดหน้าจอและอาจเปลี่ยนไปใน API รุ่นต่อไป
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 7, maptypecontrol: จริง, maptypecontroloptions: {สไตล์: google.maps.maptypecontrolstyle.dropdown_menu}, maptypeid var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body>นอกจากนี้คุณสามารถใช้คุณสมบัติการควบคุมเพื่อระบุตำแหน่งของการควบคุม:
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 7, maptypecontrol: จริง, maptypecontroloptions: {style: google.maps.maptypecontrolstyle.dropdown_menu google.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body>Google Maps - ชุดควบคุมที่กำหนดเอง
สร้างตัวควบคุมที่กำหนดเองเพื่อกลับไปลอนดอนเพื่อคลิกกิจกรรม: (หากแผนที่ถูกลาก):
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); // เพิ่มการควบคุมบ้านที่ส่งคืนผู้ใช้ไปยัง Homecontrol (controldiv, แผนที่) {controldiv.style.padding = '5px'; var controlui = document.createelement ('div'); Controlui.style.backgroundColor = 'Yellow'; controlui.style.border = '1px solid'; controlui.style.cursor = 'ตัวชี้'; 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); // การตั้งค่า Click-Event Listener: เพียงแค่ตั้งแผนที่ไปที่ London google.maps.event.adddomListener (ControlUi, 'คลิก', ฟังก์ชั่น () {map.setCenter (ลอนดอน)});} function เริ่มต้น () {var mapdiv = document.getElementById ('googlemap'); var myoptions = {ซูม: 12, ศูนย์: ลอนดอน, maptypeid: google.maps.maptypeid.roadmap} แผนที่ = ใหม่ google.maps.map (MAPDIV, myoptions); // สร้าง div เพื่อควบคุมการควบคุมและเรียก homecontrol () var homecontroldiv = document.createElement ('div'); var homecontrol = homecontrol ใหม่ (homecontoldiv, แผนที่); // homecontroldiv.index = 1; map.controls [google.maps.controlposition.top_right] .push (homecontroldiv);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body> <body>ข้างต้นคือข้อมูลการจัดเรียงชุดควบคุมแผนที่ Google เราจะเพิ่มความรู้ที่เกี่ยวข้องต่อไปในอนาคต ฉันหวังว่าเพื่อนที่สามารถช่วยพัฒนาแอปพลิเคชันแผนที่ Google ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!