Google Haritalar - Semboller

İşaretçiler, çokgenler, çoklu çizgiler ve diğer geometrik şekillere ek olarak, bir haritaya önceden tanımlanmış vektör görüntüleri (semboller) de ekleyebiliriz. Bu bölüm, Google Maps tarafından sağlanan sembollerin nasıl kullanılacağını açıklamaktadır.

Bir Sembol Eklemek

Google, bir işaretçi veya sürekli çizgide kullanılabilen çeşitli vektör tabanlı görüntüler (semboller) sağlar. Tıpkı diğer kaplamalar gibi, bu önceden tanımlanmış sembolleri bir harita üzerine çizmek için, onların ilgili sınıflarını somutlaştırmalıyız. Aşağıda Google tarafından sağlanan önceden tanımlanmış sembollerin bir listesi ve sınıf adları verilmiştir -

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

Bu semboller şu özelliklere sahiptir: path, fillColor, fillOpacity, scale, stokeColor, strokOpacity ve strok Ağırlığı.

Misal

Aşağıdaki örnek, Google Haritası üzerinde önceden tanımlanmış sembollerin nasıl çizileceğini gösterir.

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

Aşağıdaki çıktıyı üretir -

Sembolü Canlandırma

İşaretçiler gibi, sembollere sıçrama ve düşme gibi animasyonlar da ekleyebilirsiniz.

Misal

Aşağıdaki örnek, bir sembolün haritada işaretçi olarak nasıl kullanılacağını ve ona animasyon ekleneceğini gösterir -

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

Aşağıdaki çıktıyı üretir -