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>

它產生以下輸出：-

列印頁面

上一步

下一步