Google Maps - Điểm đánh dấu

Chúng ta có thể vẽ các đối tượng trên bản đồ và liên kết chúng với một vĩ độ và kinh độ mong muốn. Chúng được gọi là lớp phủ. Google Maps cung cấp các lớp phủ khác nhau như được hiển thị bên dưới.

Markers
Polylines
Polygons
Hình tròn và hình chữ nhật
Cửa sổ thông tin
Symbols

Để đánh dấu một vị trí trên bản đồ, Google Maps cung cấp markers. Những điểm đánh dấu này sử dụng một ký hiệu tiêu chuẩn và những ký hiệu này có thể được tùy chỉnh. Chương này giải thích cách thêm điểm đánh dấu và cách tùy chỉnh, tạo hoạt ảnh và xóa chúng.

Thêm một điểm đánh dấu đơn giản

Bạn có thể thêm một điểm đánh dấu đơn giản vào bản đồ tại một vị trí mong muốn bằng cách khởi tạo lớp điểm đánh dấu và chỉ định vị trí sẽ được đánh dấu bằng cách sử dụng latlng, như được hiển thị bên dưới.

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

Thí dụ

Đoạn mã sau đặt điểm đánh dấu thành phố Hyderabad (Ấn Độ).

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

Nó tạo ra kết quả sau:

Tạo hoạt ảnh cho Marker

Sau khi thêm một điểm đánh dấu vào bản đồ, bạn có thể đi xa hơn và thêm hình ảnh động vào nó, chẳng hạn như bounce và drop. Đoạn mã sau cho biết cách thêm hoạt ảnh trả lại và thả vào điểm đánh dấu.

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

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

Thí dụ

Đoạn mã sau đặt điểm đánh dấu trên thành phố Hyderabad với hiệu ứng hoạt ảnh được thêm vào:

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

Nó tạo ra kết quả sau:

Tùy chỉnh điểm đánh dấu

Bạn có thể sử dụng các biểu tượng của riêng mình thay vì biểu tượng mặc định do Google Maps cung cấp. Chỉ cần đặt biểu tượng làicon:'ICON PATH'. Và bạn có thể làm cho biểu tượng này có thể kéo được bằng cách cài đặtdraggable:true.

Thí dụ

Ví dụ sau đây cho thấy cách tùy chỉnh điểm đánh dấu thành một biểu tượng mong muốn -

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

Nó tạo ra kết quả sau:

Xóa điểm đánh dấu

Bạn có thể xóa điểm đánh dấu hiện có bằng cách thiết lập điểm đánh dấu thành rỗng bằng cách sử dụng marker.setMap() phương pháp.

Thí dụ

Ví dụ sau đây cho thấy cách xóa điểm đánh dấu khỏi bản đồ -

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

Nó tạo ra kết quả sau: