Google 地圖 - 圖形

在上一章中，我們學習瞭如何在 Google 地圖中使用標記。除了標記之外，我們還可以新增各種形狀，例如圓形、多邊形、矩形、多段線等。本章解釋如何使用 Google 地圖提供的形狀。

多段線

Google 地圖提供的多段線可用於追蹤不同的路徑。您可以透過例項化類`google.maps.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>

這將提供以下輸出：

圓形

與矩形一樣，我們可以使用圓形來使用圓形突出顯示特定區域或州的地理區域，方法是例項化類`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>

它將產生以下輸出：

列印頁面