Google Maps - 標記

我們可以在地圖上繪製物件並將它們繫結到所需的經緯度。這些被稱為覆蓋層。Google Maps 提供了各種覆蓋層，如下所示。

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

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

新增簡單標記

您可以透過例項化標記類並使用 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 Maps 提供的預設圖示。只需將圖示設定為**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>

它產生以下輸出：

列印頁面