Google Maps - รูปร่าง

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

โพลีลีน

Polylines ซึ่งจัดทำโดย Google Maps มีประโยชน์ในการติดตามเส้นทางต่างๆ คุณสามารถเพิ่มโพลีไลน์ลงในแผนที่ได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polyline. ในขณะที่สร้างอินสแตนซ์คลาสนี้เราต้องระบุค่าที่ต้องการของคุณสมบัติของ polyline เช่น StrokeColor, StokeOpacity และ strokeWeight

เราสามารถเพิ่มเส้นตรงลงในแผนที่ได้โดยส่งวัตถุไปยังเมธอด setMap(MapObject). เราสามารถลบโพลีไลน์ได้โดยส่งค่าว่างไปยังเมธอด SetMap ()

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงเส้นหลายเส้นที่เน้นเส้นทางระหว่างเมืองเดลีลอนดอนนิวยอร์กและปักกิ่ง

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมใช้เพื่อเน้นพื้นที่ทางภูมิศาสตร์เฉพาะของรัฐหรือประเทศ คุณสามารถสร้างรูปหลายเหลี่ยมที่ต้องการได้โดยสร้างอินสแตนซ์ของคลาสgoogle.maps.Polygon. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของรูปหลายเหลี่ยมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการวาดรูปหลายเหลี่ยมเพื่อเน้นเมืองไฮเดอราบาดนาคปุระและออรังกาบัด

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

สี่เหลี่ยม

เราสามารถใช้รูปสี่เหลี่ยมเพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้กล่องสี่เหลี่ยม เราสามารถมีสี่เหลี่ยมผืนผ้าบนแผนที่ได้โดยการสร้างอินสแตนซ์ของคลาสgoogle.maps.Rectangle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของสี่เหลี่ยมผืนผ้าเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่เฉพาะบนแผนที่โดยใช้สี่เหลี่ยมผืนผ้า -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

แวดวง

เช่นเดียวกับรูปสี่เหลี่ยมเราสามารถใช้ Circles เพื่อเน้นพื้นที่ทางภูมิศาสตร์ของพื้นที่ใดภูมิภาคหนึ่งหรือรัฐโดยใช้วงกลมโดยการสร้างอินสแตนซ์ของชั้นเรียน google.maps.Circle. ในขณะที่สร้างอินสแตนซ์เราต้องระบุค่าที่ต้องการให้กับคุณสมบัติของวงกลมเช่น path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการเน้นพื้นที่รอบนิวเดลีโดยใช้วงกลม -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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