Mapy Google - symbole

Oprócz znaczników, wielokątów, polilinii i innych kształtów geometrycznych, możemy również dodawać na mapie predefiniowane obrazy wektorowe (symbole). W tym rozdziale wyjaśniono, jak używać symboli udostępnianych przez Google Maps.

Dodawanie symbolu

Google udostępnia różne obrazy wektorowe (symbole), których można użyć na znaczniku lub polilinii. Podobnie jak inne nakładki, aby narysować te predefiniowane symbole na mapie, musimy utworzyć instancję ich odpowiednich klas. Poniżej znajduje się lista wstępnie zdefiniowanych symboli udostępnionych przez Google i ich nazwy klas -

Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Te symbole mają następujące właściwości - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity i strokeWeight.

Przykład

Poniższy przykład ilustruje sposób rysowania predefiniowanych symboli na mapie 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>

Generuje następujący wynik -

Animowanie symbolu

Podobnie jak znaczniki, możesz dodawać animacje, takie jak odbijanie i upuszczanie, również do symboli.

Przykład

Poniższy przykład pokazuje, jak użyć symbolu jako znacznika na mapie i dodać do niego animację -

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

Generuje następujący wynik -