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>

它产生以下输出：

打印页面