Учебники

Карты Google — символы

Сентябрь 3, 2018

В дополнение к маркерам, многоугольникам, полилиниям и другим геометрическим формам, мы также можем добавить предопределенные векторные изображения (символы) на карте. В этой главе объясняется, как использовать символы, предоставляемые Google Maps.

Добавление символа

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.maps.SymbolPath.CIRCLE

Стрелка, указывающая назад (закрыта) — google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

Стрелка вперед (закрыта) — google.maps.SymbolPath.FORWARD_CLOSED_ARROW

Стрелка «вперед» (открытая) — google.maps.SymbolPath.CIRCLE

Стрелка, указывающая назад (открытая) — google.maps.SymbolPath.CIRCLE

Эти символы имеют следующие свойства — path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity и strokeWeight.

пример

В следующем примере показано, как рисовать предопределенные символы на карте Google.

Live Demo

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

Он производит следующий вывод —

Анимация символа

Как и маркеры, вы можете добавлять анимацию, такую ​​как отскок и падение, к символам.

пример

В следующем примере показано, как использовать символ в качестве маркера на карте и добавить к нему анимацию.

Live Demo 

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

Он производит следующий вывод —

42
Share: