Google 地图 - 形状

在上一章中，我们学习了如何在 Google 地图中使用标记。除了标记之外，我们还可以添加各种形状，例如圆形、多边形、矩形、折线等。本章介绍如何使用 Google 地图提供的形状。

折线

由 Google 地图提供的折线可用于跟踪不同的路径。您可以通过实例化google.maps.Polyline类来向地图添加折线。在实例化此类时，我们必须指定折线属性所需的值，例如 StrokeColor、StokeOpacity 和 StrokeWeight。

我们可以通过将折线对象传递给方法setMap(MapObject)来将折线添加到地图中。我们可以通过向 SetMap() 方法传递 null 值来删除折线。

例子

以下示例显示了一条折线，突出显示了德里、伦敦、纽约和北京等城市之间的路径。

现场演示

<!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类来创建所需的多边形。在实例化时，我们必须为 Polygon 的属性指定所需的值，例如路径、描边颜色、描边Oapacity、填充颜色、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在地图上显示一个矩形。在实例化时，我们必须为矩形的属性指定所需的值，例如路径、描边颜色、描边Oapacity、填充颜色、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: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类，使用 Circles 来突出显示特定区域或州的地理区域。在实例化时，我们必须为圆的属性指定所需的值，例如路径、描边颜色、描边Oapacity、填充颜色、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(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>

它将产生以下输出 -