Google Maps - การควบคุม UI

Google Maps มีอินเทอร์เฟซผู้ใช้พร้อมการควบคุมต่างๆเพื่อให้ผู้ใช้โต้ตอบกับแผนที่ เราสามารถเพิ่มปรับแต่งและปิดใช้งานการควบคุมเหล่านี้ได้

การควบคุมเริ่มต้น

นี่คือรายการของการควบคุมเริ่มต้นที่มีให้โดย Google Maps -

Zoom- หากต้องการเพิ่มและลดระดับการซูมของแผนที่เราจะมีแถบเลื่อนพร้อมปุ่ม + และ - ตามค่าเริ่มต้น แถบเลื่อนนี้จะอยู่ที่มุมซ้ายมือของแผนที่
Pan - เหนือแถบเลื่อนการซูมจะมีตัวควบคุมการแพนสำหรับการแพนแผนที่
Map Type- คุณสามารถค้นหาการควบคุมนี้ได้ที่มุมขวาบนของแผนที่ มันมีตัวเลือกประเภทแผนที่เช่นดาวเทียมแผนงานและภูมิประเทศ ผู้ใช้สามารถเลือกแผนที่ใดก็ได้เหล่านี้
Street view- ระหว่างไอคอนแพนและแถบเลื่อนซูมเรามีไอคอนเพ็กแมน ผู้ใช้สามารถลากไอคอนนี้และวางที่ตำแหน่งใดตำแหน่งหนึ่งเพื่อรับมุมมองถนน

ตัวอย่าง

นี่คือตัวอย่างที่คุณสามารถสังเกตการควบคุม UI เริ่มต้นที่ Google Maps มีให้ -

การปิดใช้งานการควบคุมเริ่มต้นของ UI

เราสามารถปิดใช้งานการควบคุม UI เริ่มต้นที่ Google Maps มีให้ได้ง่ายๆเพียงแค่ทำ disableDefaultUI ค่าจริงในตัวเลือกแผนที่

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีปิดใช้งานการควบคุม UI เริ่มต้นที่ Google Maps มีให้

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การเปิด / ปิดการใช้งานการควบคุมทั้งหมด

นอกเหนือจากการควบคุมเริ่มต้นเหล่านี้ Google Maps ยังมีการควบคุมอีกสามรายการตามรายการด้านล่าง

Scale- การควบคุมมาตราส่วนจะแสดงองค์ประกอบมาตราส่วนแผนที่ การควบคุมนี้ไม่ได้เปิดใช้งานโดยค่าเริ่มต้น
Rotate- การควบคุมการหมุนประกอบด้วยไอคอนวงกลมขนาดเล็กซึ่งช่วยให้คุณสามารถหมุนแผนที่ที่มีภาพเอียงได้ การควบคุมนี้จะปรากฏตามค่าเริ่มต้นที่มุมบนซ้ายของแผนที่ (ดู 45 °ภาพสำหรับข้อมูลเพิ่มเติม)
Overview- ในการเพิ่มและลดระดับการซูมของแผนที่เรามีแถบเลื่อนพร้อมปุ่ม + และ - โดยค่าเริ่มต้น แถบเลื่อนนี้อยู่ที่มุมซ้ายของแผนที่

ในตัวเลือกแผนที่เราสามารถเปิดและปิดการควบคุมใด ๆ ที่ Google Maps มีให้ดังที่แสดงด้านล่าง -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

ตัวอย่าง

รหัสต่อไปนี้แสดงวิธีเปิดใช้งานการควบคุมทั้งหมด -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวเลือกการควบคุม

เราสามารถเปลี่ยนลักษณะของการควบคุม Google แผนที่โดยใช้ตัวเลือกการควบคุม ตัวอย่างเช่นการควบคุมการซูมสามารถลดหรือขยายขนาดได้ ลักษณะการควบคุม MapType สามารถเปลี่ยนแปลงได้ตามแถบแนวนอนหรือเมนูแบบเลื่อนลง ด้านล่างนี้คือรายการตัวเลือกการควบคุมสำหรับการควบคุมการซูมและ MapType

ซีเนียร์	ชื่อตัวควบคุม	ตัวเลือกการควบคุม
1	การควบคุมการซูม	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	การควบคุม MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตวิธีใช้ตัวเลือกการควบคุม -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -

ควบคุมตำแหน่ง

คุณสามารถเปลี่ยนตำแหน่งของตัวควบคุมได้โดยเพิ่มบรรทัดต่อไปนี้ในตัวเลือกการควบคุม

position:google.maps.ControlPosition.Desired_Position,

นี่คือรายการตำแหน่งที่มีอยู่ซึ่งสามารถวางการควบคุมบนแผนที่ได้ -

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีวางตัวควบคุม MapTypeid ที่ตรงกลางด้านบนของแผนที่และวิธีวางตัวควบคุมการซูมที่ตรงกลางด้านล่างของแผนที่

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

สร้างผลลัพธ์ต่อไปนี้ -