Mapy Google - znaczniki

Możemy rysować obiekty na mapie i wiązać je z wybraną szerokością i długością geograficzną. Nazywa się to nakładkami. Mapy Google zapewniają różne nakładki, jak pokazano poniżej.

Markers
Polylines
Polygons
Okrąg i prostokąt
Okno informacyjne
Symbols

Aby oznaczyć pojedyncze miejsce na mapie, Google Maps zapewnia markers. Te znaczniki używają standardowego symbolu, który można dostosować. W tym rozdziale wyjaśniono, jak dodawać znaczniki oraz jak je dostosowywać, animować i usuwać.

Dodawanie prostego markera

Możesz dodać prosty znacznik do mapy w żądanym miejscu, tworząc instancję klasy znacznika i określając pozycję, która ma być oznaczona za pomocą latlng, jak pokazano poniżej.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Przykład

Poniższy kod ustawia znacznik na mieście Hyderabad (Indie).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Generuje następujący wynik -

Animowanie znacznika

Po dodaniu znacznika do mapy możesz przejść dalej i dodać do niego animacje np bounce i drop. Poniższy fragment kodu pokazuje, jak dodać animacje odbijania i upuszczania do znacznika.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Przykład

Poniższy kod ustawia znacznik na mieście Hyderabad z dodatkowym efektem animacji -

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Generuje następujący wynik -

Dostosowywanie znacznika

Możesz użyć własnych ikon zamiast domyślnej ikony dostarczanej przez Mapy Google. Po prostu ustaw ikonę jakoicon:'ICON PATH'. I możesz przeciągnąć tę ikonę, ustawiającdraggable:true.

Przykład

Poniższy przykład pokazuje, jak dostosować znacznik do żądanej ikony -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Generuje następujący wynik -

Usuwanie znacznika

Możesz usunąć istniejący znacznik, ustawiając znacznik na null za pomocą marker.setMap() metoda.

Przykład

Poniższy przykład pokazuje, jak usunąć znacznik z mapy -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Generuje następujący wynik -