Google 地图 - 符号

上一步

下一步

除了标记、多边形、折线和其他几何形状外，我们还可以在地图上添加预定义的矢量图像（符号）。本章说明如何使用 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

这些符号具有以下属性：路径、填充色、填充不透明度、比例、描边颜色、描边不透明度和描边粗细。

示例

以下示例演示如何在 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>

它产生以下输出：-

启动符号动画

与标记一样，你也可以为符号添加动画，如弹跳和置底。

示例

以下示例显示如何在地图上将符号用作标记，并为其添加动画：-

实时演示

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

它产生以下输出：-

打印页面

上一步

下一步