Учебники

Карты Google — Маркеры

Сентябрь 3, 2018

Мы можем рисовать объекты на карте и привязывать их к желаемой широте и долготе. Это так называемые наложения. Карты Google предоставляют различные наложения, как показано ниже.

  • Маркеры
  • Ломаные
  • Полигоны
  • Круг и прямоугольник
  • Информационное окно
  • Символы

Чтобы отметить одно местоположение на карте, в Картах Google есть маркеры . Эти маркеры используют стандартный символ, и эти символы могут быть настроены. В этой главе объясняется, как добавлять маркеры, а также как настраивать, анимировать и удалять их.

Добавление простого маркера

Вы можете добавить простой маркер на карту в желаемом месте, создав экземпляр класса маркера и указав положение, которое будет отмечено, используя latlng, как показано ниже. 

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

пример

Следующий код устанавливает маркер на город Хайдарабад (Индия).

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

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

Анимация маркера

После добавления маркера на карту вы можете пойти дальше и добавить к нему анимацию, такую ​​как отскок и падение . В следующем фрагменте кода показано, как добавить анимацию отказов и отбрасывания к маркеру. 

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

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

пример

Следующий код устанавливает маркер города Хайдарабад с добавленным анимационным эффектом —

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

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

Настройка маркера

Вы можете использовать свои собственные значки вместо значка по умолчанию, предоставляемого Google Maps. Просто установите значок как значок: «ЗНАЧОК ПУТЬ» . И вы можете сделать этот значок перетаскиваемым, установив draggable: true .

пример

В следующем примере показано, как настроить маркер для нужного значка:

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

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

Удаление маркера

Вы можете удалить существующий маркер, установив маркер в null, используя метод marker.setMap () .

пример

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

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

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

45
Share: