谷歌地圖 - 快速指南

上一頁
下一頁

谷歌地圖 - 開始使用

什麼是谷歌地圖？

谷歌地圖是谷歌提供的免費網路地圖服務，提供各種地理資訊。使用谷歌地圖，您可以：

  • 搜尋地點或獲取從一個地點到另一個地點的路線。

  • 檢視和瀏覽世界各地不同城市的水平和垂直全景街道影像。

  • 獲取特定資訊，例如特定地點的交通狀況。

谷歌地圖提供一個API，您可以使用它來自定義地圖和地圖上顯示的資訊。本章解釋如何使用HTML和JavaScript在您的網頁上載入簡單的谷歌地圖。

在網頁上載入地圖的步驟

按照以下步驟在您的網頁上載入地圖：

步驟1：建立HTML頁面

建立一個基本的HTML頁面，包含頭部和主體標籤，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步驟2：載入API

使用script標籤載入或包含谷歌地圖API，如下所示：

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

步驟3：建立容器

為了容納地圖，我們必須建立一個容器元素，通常使用<div>標籤（通用容器）來實現此目的。建立一個容器元素並定義其尺寸，如下所示：

<div id = "sample" style = "width:900px; height:580px;"></div>

步驟4：地圖選項

在初始化地圖之前，我們必須建立一個**mapOptions**物件（其建立方式類似於字面量），併為地圖初始化變數設定值。地圖有三個主要選項，即**中心點(centre)**、**縮放級別(zoom)**和**地圖型別(maptypeid)**。

  • **中心點(centre)** - 在此屬性下，我們必須指定要將地圖中心點設定到的位置。要傳遞位置，我們必須透過將所需位置的緯度和經度傳遞給建構函式來建立一個**LatLng**物件。

  • **縮放級別(zoom)** - 在此屬性下，我們必須指定地圖的縮放級別。

  • **地圖型別(maptypeid)** - 在此屬性下，我們必須指定所需的地圖型別。以下是谷歌提供的地圖型別：

    • ROADMAP（普通地圖，預設的二維地圖）
    • SATELLITE（衛星地圖）
    • HYBRID（混合地圖，兩種或多種其他型別的組合）
    • TERRAIN（地形地圖，包含山脈、河流等）

在一個函式中，例如**loadMap()**，建立mapOptions物件併為center、zoom和mapTypeId設定所需的值，如下所示。

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

步驟5：建立地圖物件

您可以透過例項化名為**Map**的JavaScript類來建立地圖。例項化此類時，您必須傳遞一個HTML容器來容納地圖，以及所需地圖的地圖選項。建立一個地圖物件，如下所示。

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

步驟6：載入地圖

最後，透過呼叫loadMap()方法或新增DOM監聽器來載入地圖。

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

示例

以下示例顯示如何載入縮放級別為12的維沙卡帕特南市路線圖。

線上演示 
<!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:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

谷歌地圖 - 型別

在上一章中，我們討論瞭如何載入基本地圖。在這裡，我們將瞭解如何選擇所需的地圖型別。

地圖型別

谷歌地圖提供四種地圖型別。它們是：

  • **ROADMAP** - 這是預設型別。如果您沒有選擇任何型別，則會顯示此型別。它顯示所選區域的街道檢視。

  • **SATELLITE** - 這種地圖型別顯示所選區域的衛星影像。

  • **HYBRID** - 這種地圖型別在衛星影像上顯示主要街道。

  • **TERRAIN** - 這種地圖型別顯示地形和植被。

語法

要選擇其中一種地圖型別，您必須在地圖選項中提及相應的地圖型別 ID，如下所示：

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

路線圖 (Roadmap)

以下示例顯示如何選擇 ROADMAP 型別的地圖：

線上演示 
<!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:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

衛星地圖 (Satellite)

以下示例顯示如何選擇 SATELLITE 型別的地圖：

線上演示 
<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

混合地圖 (Hybrid)

以下示例顯示如何選擇 HYBRID 型別的地圖：

線上演示 
<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

它將產生以下輸出：

地形地圖 (Terrain)

以下示例顯示如何選擇 TERRAIN 型別的地圖：

線上演示 
<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

谷歌地圖 - 縮放

增加/減少縮放值

您可以透過修改地圖選項中**zoom**屬性的值來增加或減少地圖的縮放值。

語法

我們可以使用縮放選項來增加或減少地圖的縮放值。以下是更改當前地圖縮放值的語法。

var mapOptions = {
   zoom:required zoom value
};

示例：縮放級別 6

以下程式碼將顯示縮放級別為 6 的維沙卡帕特南市路線圖。

線上演示 
<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

示例：縮放級別 10

以下程式碼將顯示縮放級別為 10 的維沙卡帕特南市路線圖。

線上演示 
<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

谷歌地圖 - 本地化

預設情況下，地圖上顯示的城市名稱和選項名稱為英文。如果需要，我們也可以使用其他語言顯示此類資訊。此過程稱為**本地化**。在本節中，我們將學習如何本地化地圖。

本地化地圖

您可以透過在 URL 中指定語言選項來自定義（本地化）地圖的語言，如下所示。

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

示例

這是一個顯示如何本地化 GoogleMaps 的示例。您可以看到本地化為中文的中國路線圖。

線上演示 
<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            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>

輸出

它將產生以下輸出：

谷歌地圖 - 使用者介面控制元件

谷歌地圖提供了一個使用者介面，其中包含各種控制元件，使使用者可以與地圖進行互動。我們可以新增、自定義和停用這些控制元件。

預設控制元件

以下是谷歌地圖提供的預設控制元件列表：

  • **縮放 (Zoom)** - 預設情況下，我們將有一個帶有 + 和 - 按鈕的滑塊來增加和減少地圖的縮放級別。此滑塊將位於地圖左側的角落。

  • **平移 (Pan)** - 在縮放滑塊上方，將有一個用於平移地圖的平移控制元件。

  • **地圖型別 (Map Type)** - 您可以在地圖的右上角找到此控制元件。它提供地圖型別選項，例如衛星地圖、路線圖和地形地圖。使用者可以選擇這些地圖中的任何一個。

  • **街景 (Street view)** - 在平移圖示和縮放滑塊之間，我們有一個小人圖示。使用者可以拖動此圖示並將其放置在特定位置以獲取其街景檢視。

示例

這是一個示例，您可以在其中觀察谷歌地圖提供的預設使用者介面控制元件：

停用使用者介面預設控制元件

我們可以透過在地圖選項中將**disableDefaultUI**的值設定為 true 來停用谷歌地圖提供的預設使用者介面控制元件。

示例

以下示例顯示如何停用谷歌地圖提供的預設使用者介面控制元件。

線上演示 
<!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>

它將產生以下輸出：

啟用/停用所有控制元件

除了這些預設控制元件外，谷歌地圖還提供另外三個控制元件，如下所示。

  • **比例尺 (Scale)** - 比例尺控制元件顯示地圖比例尺元素。此控制元件預設情況下未啟用。

  • **旋轉 (Rotate)** - 旋轉控制元件包含一個小的圓形圖示，允許您旋轉包含傾斜影像的地圖。此控制元件預設情況下顯示在地圖的左上角。（有關更多資訊，請參閱 45° 影像）。

  • **概覽 (Overview)** - 預設情況下，我們將有一個帶有 + 和 - 按鈕的滑塊來增加和減少地圖的縮放級別。此滑塊位於地圖的左角。

在地圖選項中，我們可以啟用和停用谷歌地圖提供的任何控制元件，如下所示：

{
   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>

它將產生以下輸出：

控制元件選項

我們可以使用其控制元件選項來更改谷歌地圖控制元件的外觀。例如，可以減小或增大縮放控制元件的大小。地圖型別控制元件的外觀可以變化為水平條或下拉選單。以下是縮放和地圖型別控制元件的控制元件選項列表。

序號 控制元件名稱 控制元件選項
1 縮放控制元件
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 地圖型別控制元件
  • 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>

它會產生以下輸出：

谷歌地圖 - 標記

我們可以在地圖上繪製物件並將它們繫結到所需緯度和經度。這些稱為疊加層。谷歌地圖提供各種疊加層，如下所示。

  • 標記
  • 折線
  • 多邊形
  • 圓形和矩形
  • 資訊視窗
  • 符號

為了在地圖上標記單個位置，谷歌地圖提供**標記**。這些標記使用標準符號，並且可以自定義這些符號。本章解釋如何新增標記，以及如何自定義、動畫和刪除它們。

新增簡單的標記

您可以透過例項化標記類並使用 latlng 指定要標記的位置來在地圖上的所需位置新增簡單的標記，如下所示。

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

示例

以下程式碼將標記設定在海德拉巴市（印度）。

線上演示 
<!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:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

標記動畫

將標記新增到地圖後，您可以進一步向其新增動畫，例如**反彈**和**下落**。以下程式碼片段顯示如何向標記新增反彈和下落動畫。

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

示例

以下程式碼將標記設定在海德拉巴市，並添加了動畫效果：

線上演示 
<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

自定義標記

您可以使用自己的圖示來代替 Google 地圖提供的預設圖示。只需將圖示設定為icon:'ICON PATH'。您可以透過設定draggable:true來使此圖示可拖動。

示例

以下示例演示如何將標記自定義為所需的圖示：

線上演示 
<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

移除標記

您可以使用marker.setMap()方法將標記設定為 null 來移除現有標記。

示例

以下示例演示如何從地圖中移除標記：

線上演示 
<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

谷歌地圖 - 形狀

在上一章中，我們學習瞭如何在 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類來建立所需的多邊形。例項化時，我們必須為多邊形的屬性指定所需的值，例如 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>

它將產生以下輸出：

谷歌地圖 - 資訊視窗

除了標記、多邊形、折線和其他幾何形狀外，我們還可以在地圖上繪製資訊視窗。本章介紹如何使用資訊視窗。

新增視窗

資訊視窗用於向地圖新增任何型別的資訊。例如，如果您想提供有關地圖上某個位置的資訊，可以使用資訊視窗。資訊視窗通常附加到標記。您可以透過例項化google.maps.InfoWindow類來附加資訊視窗。它具有以下屬性：

  • 內容 - 您可以使用此選項以字串格式傳遞您的內容。

  • 位置 - 您可以使用此選項選擇資訊視窗的位置。

  • maxWidth - 預設情況下，資訊視窗的寬度將被拉伸直到文字換行。透過指定 maxWidth，我們可以水平限制資訊視窗的大小。

示例

以下示例演示如何設定標記並在其上方指定資訊視窗：

線上演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它將產生以下輸出：

谷歌地圖 - 符號

除了標記、多邊形、折線和其他幾何形狀外，我們還可以在地圖上新增預定義的向量影像（符號）。本章介紹如何使用 Google 地圖提供的符號。

新增符號

Google 提供各種基於向量的影像（符號），可用於標記或折線上。與其他疊加層一樣，要在地圖上繪製這些預定義的符號，我們必須例項化其各自的類。以下是 Google 提供的預定義符號及其類名的列表：

  • 圓形 - google.maps.SymbolPath.CIRCLE

  • 向後指向箭頭（閉合） - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • 向前指向箭頭（閉合） - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • 向前指向箭頭（開放） - google.maps.SymbolPath.CIRCLE

  • 向後指向箭頭（開放） - google.maps.SymbolPath.CIRCLE

這些符號具有以下屬性：path、fillColor、fillOpacity、scale、stokeColor、strokeOpacity 和 strokeWeight。

示例

以下示例演示如何在 Google 地圖上繪製預定義的符號。

線上演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

動畫符號

與標記一樣，您也可以向符號新增彈跳和下落等動畫。

示例

以下示例演示如何在 Google 地圖上使用符號作為標記並向其新增動畫：

線上演示 
<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

谷歌地圖 - 事件

Google 地圖 JavaScript 程式可以響應使用者生成的各種事件。本章提供示例，演示如何在使用 Google 地圖時執行事件處理。

新增事件偵聽器

您可以使用addListener()方法新增事件偵聽器。它接受引數，例如我們要在其上新增偵聽器的物件名稱、事件名稱和處理程式事件。

示例

以下示例演示如何向標記物件新增事件偵聽器。每次我們雙擊標記時，程式都會將地圖的縮放值增加 5。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

點選時開啟資訊視窗

以下程式碼在單擊標記時開啟資訊視窗：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

移除偵聽器

您可以使用removeListener()方法移除現有偵聽器。此方法接受偵聽器物件，因此我們必須將偵聽器分配給變數並將其傳遞給此方法。

示例

以下程式碼演示如何移除偵聽器：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

它會產生以下輸出：

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.